Как динамически изменять экран switchnavigator

Итак, у меня есть SwitchNavigator, который используется в функции, которая получает в качестве опоры значение (загрузка true или false). Я хочу изменить эту функцию на основе firebase onAuthStateChange, поэтому, если я не получил ответа, я визуализирую счетчик, если я получаю его, я меняю состояние и использую его как функцию, но сейчас это не работает, потому что componentDidMount не ждет за ответ от функции firebase! Любые идеи?

import React from 'react';
    import { StyleSheet, Text, View } from 'react-native';
    import { createStackNavigator, SwitchNavigator } from 'react-navigation';
    import MainScreen from './MainScreen';
    import AuthenticationNav from './Authentication';
    import firebase from 'firebase';
    import SplashScreen from './SplashScreen';

    export default class App extends React.Component {
      constructor(){
        super();
        this.state={
          screen:'loading'
        }
      }
      componentWillMount() {
      }
      componentDidMount(){
        let isItTrue
        firebase.auth().onAuthStateChanged(function(user) {
            if (user) {
             isItTrue=true;
            } else {
              isItTrue=false
            }
          });
          this.setState({screen:isItTrue})
      }
      render() {console.log(this.state)
        const App=app(this.state.screen)
        return (
            <View style={{ flex: 1 }}>
              <App />
            </View>
        );
      }
    }
    const Main = createStackNavigator({
      Main: {
        screen: MainScreen
      }
    })
    const Authentication = createStackNavigator({
      AuthenticationScreen: {
        screen: AuthenticationNav
      }
    }, {
        headerMode: 'screen'
      })
    const Splash = createStackNavigator({
      SplashScreen: {
        screen: SplashScreen
      }
    })
    const app = (isSignedIn) => {
      return SwitchNavigator({
        SignedIn: {
          screen: Main
        },
        SignedOut: {
          screen: Authentication
        },
        Loading:{
          screen:Splash
        }
      },
        {
          initialRouteName: isSignedIn==='loading' ? "Loading" : isSignedIn?"SignedIn":"SignedOut"
        }
      )
    }
1
0
621
1

Ответы 1

Добро пожаловать, Влад!

Во-первых, вот руководство от реакции-навигации, который дает пример использования SwitchNavigator. Возможно, вы это уже видели.

Я бы переместил логику, чтобы определить, вошел ли в компонент Splash, примерно так:

// SplashScreen.js
componentDidMount(){
  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      this.props.navigation.navigate('SignedIn');
    } else {
      this.props.navigation.navigate('SignedOut');
    }
  });
}

Таким образом, ваш SwitchNavigator всегда будет иметь три экрана, поэтому для initialRouteName установлено значение "Splash".

Кроме того, вы захотите использовать createSwitchNavigator вместо SwitchNavigator в будущем.

Привет! Спасибо за быстрый ответ, Брэд! Передавая логику splash, вы имеете в виду запуск функции firebase внутри Splash? И в исходном маршруте вы предлагаете установить initialRouteName только на Splash?

Vlad Romila 13.09.2018 19:06

Верно! Кроме того, вам не нужно создавать SwitchNavigator внутри функции, его также можно напрямую назначить приложению.

BradByte 13.09.2018 19:27

Вы также можете справиться с загрузкой с помощью индикатора активности ... Я обновил, чтобы показать, как может выглядеть componentDidMount.

BradByte 13.09.2018 19:28

Другие вопросы по теме