Перенаправление экрана требует времени для выполнения после асинхронного вызова в React-native

Question

Я занимаюсь разработкой небольшого приложения с Expo, React-native-router-flux, firebase и Reaction-redux. Я пытаюсь реализовать экран запуска, который появляется после экрана spla sh, и проверяет, загружен ли пользователь или нет. Экран запуска вызывает следующее действие внутри функции componentDIdMount:

export const tryToSignInSilently = user => {
  return () => {
    console.log(user);
    console.log(Actions);
    setTimeout(() => {
      if (user != null) Actions.tabbar();
      else Actions.LoginScreen();
    }, 1000);
  };
};

Мне пришлось добавить этот setTimeout, чтобы иметь возможность перенаправить экран, иначе он не изменит экран. 1) Это рекомендуемое решение проблемы?

После того, как он перенаправляет на экран входа в систему и нажимает кнопку отправки, создается другое действие:

export const login = (email, password) => {
return dispatch => {   

dispatch({ type: LOGIN });
console.log("This executes");

FirebaseService.signIn(email, password)
  .then(user => {
    console.log("This takes almost a minute to execute");
    dispatch({ type: LOGIN_SUCCESS, payload: user });
    Actions.tabbar();
  })
  .catch(error => {
    dispatch({ type: LOGIN_FAIL });
    if (error) {
      Alert.alert(
        i18n.t("app.attention"),
        i18n.t("login.enter.message"),
        [{ text: i18n.t("app.ok") }],
        { cancelable: true }
      );
    }
  }); };};

FirebaseService.signIn function = >

static async signIn(email, password) {
return await firebase.auth().signInWithEmailAndPassword(email, password);  }

Интересное замечание: если я нажму кнопку отправки на экране входа в систему и сохраню код (вызывая перезагрузку в реальном времени), функция firebase будет выполнена немедленно, и страница будет правильно перенаправлена ​​на домашний экран. 2) Что может быть причиной такого поведения?

Большое спасибо!

Answer 1

Попробуйте инкапсулировать ваш компонент с использованием метода ловушки useContext. Выполните все входы в систему внутри компонента контекста, используя хук useEffect с функцией Firebase onAuthStateChanged. См. Пример кода ниже:

const AuthProvider = ({ children }) => {

const [userObject, setUserObject] = useState(null); 
const [loggedIn, setLoggedIn] = useState(null);


useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
      if(user){
        setLoggedIn(true);
        setUserObject(user);
      }
      else {
          setLoggedIn(false);
          setUserObject(null);
      }
  });
// Cleanup subscription on unmount
return () => unsubscribe();

  }, []);

 const [state, dispatch] = useReducer(reducer, []);

return(
    <AuthContext.Provider value={{ loggedIn, userObject }}>{ children }</AuthContext.Provider>
);

}

export {AuthProvider, AuthContext};

Затем на экране запуска используйте переменную контекста 'loggedIn', чтобы определить, пользователь уже вошел или нет.