带有选项卡的React本机导航注销功能
带有选项卡的React本机导航注销功能
提问于 2017-06-20 06:15:26
我正在尝试用我的应用程序实现登录/注销功能，使用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.
});
}是否有不同的导航器功能可以从整个选项卡视图进行导航？是否有应该添加到父选项卡导航组件的侦听器或其他内容？
回答 2
Stack Overflow用户
发布于 2017-06-20 20: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/>;
}希望这能有所帮助！
Stack Overflow用户
发布于 2017-08-07 17: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.
});
}这样，您就有了自己的用于选项卡项的堆栈导航器，以及用于页面导航的堆栈导航器(登录到选项卡导航页、返回到登录或再见页面)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44640793
复制相关文章
相似问题
腾讯云开发者
