Как динамически менять экран SwitchNavigator - PullRequest
Новая
       18

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

0 голосов
/ 13 сентября 2018

Таким образом, у меня есть 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 голосов
/ 13 сентября 2018

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

Во-первых, вот руководство по реагированию-навигации , в котором приведен пример использования 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, идущего вперед.

...