Как настроить навигацию после того, как мой экран входа в систему реагирует родной

Question

Как настроить навигацию после того, как мой экран входа в систему реагирует на родной

Это моя страница навигации

Я попытался выполнить следующие шаги, но не могу найти решение.

const TabNavigator = createBottomTabNavigator ({
  Home:{screen:Login},
  Create:{screen:Register}
  },{
    tabBarOptions:{
      activeTintColor:'white',
      activeBackgroundColor:'#FF4A83',
      inactiveTintColor:'black',
      inactiveBackgroundColor:'#FE739F',
      labelStyle:{
        fontSize:16,
        padding:10,
      }
    }
  });
  const Navigation = createStackNavigator({
    dashboard:{screen:dashboard}
  })
export default createAppContainer(TabNavigator , Navigation);

Это моя страница входа.

export default class Login extends Component{
  constructor(props) {
    super(props)
    this.state = {
      username: '',
      password: '',
    }
    this._login = this._login.bind(this);
  }
   navigationOptions = {
    tabBarLabel: 'Login',
  }
  _login(){

    if(this.state.username=='shankar' && this.state.password=='12345'){
    //  alert('Successfully login')
    this.props.navigation.navigate('dashboard')
}else{
      alert('Login or Password incorrect')
    }
  }
  render(){
    return(

   ....
)}

Заранее спасибо .. !!

Answer 1

Попробуйте добавить вкладку TabNavigator внутри стека навигатора. что-то вроде этого

const Navigation = createStackNavigator ({TabNavigator, панель инструментов: {screen: панель инструментов}})

экспорт по умолчанию createAppContainer (Navigation);

Answer 2

Лучшим подходом было бы создать SwitchNavigator, как упомянуто в документах реагирующей навигации. Выезд https://reactnavigation.org/docs/en/auth-flow.html

      const TabNavigator = createBottomTabNavigator ({
      Home:{screen:Login},
      Create:{screen:Register}
      },{
        tabBarOptions:{
          activeTintColor:'white',
          activeBackgroundColor:'#FF4A83',
          inactiveTintColor:'black',
          inactiveBackgroundColor:'#FE739F',
          labelStyle:{
            fontSize:16,
            padding:10,
          }
        }
      });

      const Navigation = createStackNavigator({

        dashboard:{screen:dashboard},

      })

      export default createAppContainer(
        createSwitchNavigator(
          {
            AuthLoading: AuthLoadingScreen, //screen where you check for a token and navigate to App if token is present else to Auth
            Auth: TabNavigator,
            App: Navigation,

          },
          {
            initialRouteName: 'AuthLoading',
          }
        )
      );

И в классе входа

      export default class Login extends Component{
        constructor(props) {
          super(props)
          this.state = {
            username: '',
            password: '',
          }
          this._login = this._login.bind(this);
        }
         navigationOptions = {
          tabBarLabel: 'Login',
        }
        _login(){

          if(this.state.username=='shankar' && this.state.password=='12345'){
          //  alert('Successfully login')
          this.props.navigation.navigate('App')
      }else{
            alert('Login or Password incorrect')
          }
        }
        render(){
          return(

         ....
      )}