1

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

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>

但是，如果我在其中一个 TabNavigationItem 屏幕上尝试注销，则选项卡导航内的页面会注销，而不是整个页面。基本上，我在设置页面（第三个选项卡）上有一个注销按钮，当我注销时，该选项卡会返回登录屏幕，而选项卡栏仍然存在。这是该设置组件中的功能：

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

是否有不同的导航器功能可以从整个选项卡视图导航？是否有一个监听器或我应该添加到父选项卡导航组件的东西？

4

2 回答 2

2

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

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

... 在组件WillMount

 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/>;
}

希望这可以帮助！

于 2017-06-20T12:39:55.150 回答
1

You should have the login page without the Tab Navigation, so from App.js / index.js you load the login page.

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

Router.js

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

Then if you want to go to main (page with tab navigation) from login, you should reset the page instead of push to handle back button in android (of course you wouldn't want back to go back to login page after yo log in)

add this to login function

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

Then on setting page, instead of using push from the navigator you should reset the navigator

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

This way you have your own stack navigator for tab item, and stack navigator for page navigation (login to tab navigation page, back to login, or to goodbye page)

于 2017-08-07T09:57:40.647 回答