阵营与标签本地导航注销功能

问题描述：

我试图用我的应用程序实现登录/注销功能，使用前导航：阵营与标签本地导航注销功能

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

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

答

这是我如何处理应用程序的登录输入/输出。在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'); 
     } 
    })

...在渲染功能添加这些

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

希望这帮助！

答

您应该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按钮（当然你不想回回到登录页面哟登录后）

添加此登录功能

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

这种方式，你有标签的项目你自己的堆栈导航和堆栈导航的页面导航（登录到标签导航页，回登录，或再见页）

阵营与标签本地导航注销功能

相关推荐