问带有选项卡的React本机导航注销功能
EN

Stack Overflow用户

提问于 2017-06-19 22:15:26

回答 2查看 15.3K关注 0票数 1

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

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.
});
  }

是否有不同的导航器功能可以从整个选项卡视图进行导航？是否有应该添加到父选项卡导航组件的侦听器或其他内容？

react-native

firebase-authentication

ex-navigation

javascript

firebase

腾讯云域名特惠，新用户首年1元起

腾讯云域名专场特惠：个人新用户.cn仅8.8元/年，企业新用户.com仅1.06元/年...

回答 2

Stack Overflow用户

发布于 2017-06-20 12:39:55

这就是我如何处理应用程序的登录/注销。在Main.js或App.js中，我添加了以下内容

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

..。在componentWillMount中

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

..。在render函数中添加以下内容

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

希望这能有所帮助！

票数 2

Stack Overflow用户

发布于 2017-08-07 09:57:41

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

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

Router.js

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

然后，如果你想从登录转到主页(带标签导航的页面)，你应该重置页面，而不是在android中按下后退按钮(当然，你不会希望在yo登录后返回登录页面)

将此添加到登录函数

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.
  });
}