Javascript 使用选项卡响应本机导航注销功能

我正在尝试使用ex navigation在我的应用程序中实现登录/注销功能：

render() {
    return (
      <TabNavigation tabBarHeight={56} initialTab="devices">
        <TabNavigationItem
          id="devices"
          renderIcon={isSelected => this._renderIcon('hdd-o', isSelected)}>
          <StackNavigation initialRoute="devices" defaultRouteConfig={{
                                 navigationBar: {
                                   backgroundColor: '#B67075',
                                   tintColor: 'white',
                                 },
                               }}/>
        </TabNavigationItem>

        <TabNavigationItem
          id="rules"
          renderIcon={isSelected => this._renderIcon('book', isSelected)}>
          <StackNavigation initialRoute="rules" defaultRouteConfig={{
                                 navigationBar: {
                                   backgroundColor: '#B67075',
                                   tintColor: 'white',
                                 },
                               }}/>
        </TabNavigationItem>
        <TabNavigationItem
          id="settings"
          renderIcon={isSelected => this._renderIcon('cog', isSelected)}>
          <StackNavigation initialRoute="settings" defaultRouteConfig={{
                                 navigationBar: {
                                   backgroundColor: '#B67075',
                                   tintColor: 'white',
                                 },
                               }}/>
        </TabNavigationItem>
      </TabNavigation>

---

是否有不同的导航器功能从整个选项卡视图进行导航？是否有一个监听器或一些我应该添加到父选项卡导航组件中的内容？

这就是我如何处理登录/退出应用程序的方式。 在Main.js或App.js中，我添加了这个

signout(){
   AsyncStorage.clear(); // to clear the token 
   this.setState({loggedIn:false});
}

。。。以组件形式安装

 AsyncStorage.getItem('token').then((token) => {
      if (token) {
        this.setState({loggedIn: true})
      } else {
        console.log('No user yet Created');
      }
  })

。。。在渲染函数中，添加这些

if (this.state.loggedIn) {
    // pass the signout function to where you want to signout from.
    return <MainNavigator signOut={this.signout.bind(this)} />;    
}
    return <AuthPage/>;
}

if（this.state.loggedIn）{
//将signout函数传递到要从中注销的位置。
返回；
}
返回；
}

---

希望这有帮助

您应该拥有不带选项卡导航的登录页面，因此从App.js/index.js加载登录页面

<NavigationProvider router={AppRouter}>
  <StackNavigation
    id="root"
    initialRoute={Router.getRoute('login')}
  />
</NavigationProvider>

然后，如果您想从登录转到主页（带有选项卡导航的页面），您应该重置页面，而不是在android中按“返回”按钮（当然，您不想在登录后返回登录页面）

将此添加到登录功能中

然后在设置页面上，您应该重置导航器，而不是使用来自导航器的推送

logout = () => {
  firebase.auth().signOut().then(() => {
    this.props.navigator.immediatelyResetStack([Router.getRoute('goodbye')], 0);
  }).catch(function(error) {
    // An error happened.
  });
}

这样，您就有了自己的选项卡项堆栈导航器和页面导航堆栈导航器（登录到选项卡导航页面、返回到登录到或到再见页面）

export const Router = createRouter(() => ({
  'login': () => Login,
  'main': () => Main,
})

this.props.navigator.immediatelyResetStack([Router.getRoute('main')], 0);

logout = () => {
  firebase.auth().signOut().then(() => {
    this.props.navigator.immediatelyResetStack([Router.getRoute('goodbye')], 0);
  }).catch(function(error) {
    // An error happened.
  });
}