在React Native中登录屏幕后如何设置导航

如何在我的登录屏幕上以本机显示后设置导航

这是我的导航页面

我尝试了以下步骤,但找不到解决方法。

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(

   ....
)}

在此先感谢.. !!

gddgv 回答:在React Native中登录屏幕后如何设置导航

尝试将标签TabNavigator添加到堆栈Navigator中。 像这样

const Navigation = createStackNavigator({     TabNavigator,     仪表板:{screen:dashboard}   })

导出默认的createAppContainer(Navigation);

,

一种更好的方法是创建一个ReactNavigator文档中提到的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(

         ....
      )}
本文链接:https://www.f2er.com/3063480.html

大家都在问