Таймер — это удобный инструмент, который можно использовать в любом компоненте вашего приложения, и он особенно полезен при отображении временных экранов или анимированного контента. Хотя они широко используются, их реализация иногда может быть сложной, чаще всего, когда у вас много вещей. происходит в фоновом режиме.

Самый простой способ установить таймер — использовать хорошо известный метод setTimeout(), который вызывает функцию или вычисляет выражение по истечении заданного времени (миллисекунд). В приведенном ниже примере после вызова myFunction() через 3 секунды отобразится предупреждение с текстом «hello».

// Create a variable
var myVar;
// Alert function
function alertFunc() {
 alert(“Hello!”);
}
// Set the variable to a timed alert
function myFunction() {
 myVar = setTimeout(alertFunc, 3000);
}

Теперь в качестве реального примера того, как использовать таймеры в React Native, я покажу вам, как они были реализованы с помощью анимированной заставки, которая отображается во время аутентификации пользователя.

SPLASHLOADING.JS
import React from 'react';
import { Text, View, StyleSheet, SafeAreaView, Dimensions, TextInput, ScrollView, SectionList, TouchableOpacity, Image } from 'react-native';
import { DotIndicator } from 'react-native-indicators';
import { colours } from '../../styles/Colours'; 
// Firebase
import firebase from '../../services/Firebase';
var db = firebase.firestore(); 
const { width, height } = Dimensions.get("window");
const topSpacing = (height / 2) - 50;  
export default class SplashLoading extends React.Component {
   isMounted = false;
   constructor(props) {        
      super(props);        
      this.state = ({            
         userIsLoggedIn: 'false',            
         imageLoaded: false,        
      });     
   }     
   static navigationOptions = {        
      header: null,     
   }     

   checkUserAuth() {        
      firebase.auth().onAuthStateChanged(authenticate => {            
      if (authenticate) {                
         setTimeout(() => { 
            this.props.navigation.navigate('Home');                
         }, 2500);             
      } else {                
        setTimeout(() => { 
            this.props.navigation.navigate('Login');                
        }, 2500);             
      }        
   });    
 }

Важный код

Это важный код класса, в котором есть два таймера. Здесь они используются для управления временем заставки во время аутентификации пользователей, создавая согласованный поток аутентификации каждый раз, когда пользователь открывает приложение.

checkUserAuth() {        
      firebase.auth().onAuthStateChanged(authenticate => {            
      if (authenticate) {                
         setTimeout(() => { 
            this.props.navigation.navigate('Home');                
         }, 2500);             
      } else {                
        setTimeout(() => { 
            this.props.navigation.navigate('Login');                
        }, 2500);             
      }        
   });    
 }

Первый setTimeout вызывается, если пользователь успешно аутентифицирован. Если это так, экран-заставка отображается примерно 2,5 секунды, после чего он быстро заменяется начальным экраном. Второй setTimeout почти такой же, за исключением того, что при вызове экран-заставка заменяется экраном входа в систему, поскольку пользователь еще не прошел аутентификацию.

В основном таймер действует как буфер в отношении времени. Это предотвращает включение и выключение экрана-заставки, что не очень привлекательно с точки зрения взаимодействия с пользователем.

В заключении

Таймеры — отличное решение многих проблем, с которыми вы можете столкнуться при создании программного обеспечения, однако они не всегда являются лучшим вариантом, и обычно это зависит от поставленной задачи. Иногда вместо использования таймера для экрана-заставки вы можете дождаться ответа от приложения. Хотя время на экране-заставке может варьироваться в зависимости от операции, это будет означать, что все должно работать гладко и быть полностью работоспособным перед переносом на следующий экран. Это может предотвратить проблемы позже.

Спасибо за чтение!