Question

const RootNav = createStackNavigator(
  {

    Splash: {
        screen:Splash
    },
    BeforeLogin: {
        screen:BeforeLogin
    },    
    Signin: {
        screen:Signin
    },
    Tabs: {
        screen:TabHolder
    },
    ForgotPassword: {
        screen:ForgotPassword
    },
    Signup: {
        screen:Signup
    },

  },
  {
      headerMode:'none',
      mode:'modal', 
  }
);

export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
        <RootNav />
    );
  }
}

索引是最初被调用的主要类。

// Below is the TabHolder Screen which is created in RootNav

import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';

const ProfileMainTab = createStackNavigator({

      Profile: {
          screen:Profile
      },
      EditProfile: {
          screen:EditProfile
      },
      FollowersList: {
          screen:FollowersList
      },
      Following: {
        screen:Following
      },
      FollowersRequest: { 
          screen:FollowersRequest
      },
      Settings: {
          screen:Settings
      },
      Settings2: {
          screen:Settings2
      },
      Payment: {
          screen:Payment
      },
      CreditCard: {
          screen:CreditCard
      },
      VisaCard: {
        screen:VisaCard
      },
      Messaging: {
          screen:Messaging
      },
      TopRanking: {
        screen:TopRanking
      },
      WorldTopRank: {
          screen:WorldTopRank
      },
  },
  {
      headerMode:'none',
      mode:'modal'
  }
);

const HomeMainTab = createStackNavigator({
     Home: {
       screen: Home,
     },
     SharePicture: {
       screen: SharePicture,
     },
     OtherProfile: {
       screen: OtherProfile,
     },
    },
     {
      headerMode:'none',
      mode:'modal'
     }
);

const TabNav = createBottomTabNavigator ({

  HomeMainTab: {
      screen: HomeMainTab,
      navigationOptions: {    }
    },
    Search: {
      screen: Search,
      navigationOptions: {    }
    },
    AddPost: {
      screen: AddPost,
      navigationOptions: {    }
    },
    FollowersList: {
      screen: FollowersList,
      navigationOptions: {    }
    },
    ProfileMainTab: {
      screen: ProfileMainTab,
      navigationOptions: {    }    
  },{
      tabBarPosition: 'bottom',
      animationEnabled: true,
      swipeEnabled: true, 
  }
);

export default class TabHolder extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (<TabNav/>)
  }
}

我的“设置”屏幕上有一个退出按钮。因此，现在当我单击“注销”时，我想导航回到“登录屏幕”。但是我无法导航。如何使用 createSwitchNavigator 解决我的问题？请帮忙。我也无法从退出按钮使用 this.props.navigation.navigate（'Signin'）; 进行导航。

Answer 1

我想问题出在导航道具上。

您为什么需要这样做？

export default class TabHolder extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (<TabNav/>)
  }
}

它创建一个反应本机组件，其中导航需要导航对象

所以请尝试export default TabNav

在本例中，如何使用createSwitchNavigator从注销导航到登录屏幕？

1 个答案: