【问题标题】:Can a stack navigator have 2 different routes in react navigation堆栈导航器可以在反应导航中有 2 条不同的路线吗
【发布时间】:2018-07-11 20:16:57
【问题描述】:
我的项目结构如下:
Tab navigator
|-Tab1
|-Tab2
|-stack navigator
|-login
|
screen1
|
screen2
|
screen3
|-Tab3
|-Tab4
一旦我输入登录屏幕的用户名和密码,我希望我的堆栈导航器路由从 screen1 开始。我们有什么办法可以做到这一点?
我们可以重新路由/更改堆栈导航器的路由吗?
【问题讨论】:
标签:
react-native
react-navigation
stack-navigator
【解决方案1】:
使用SwitchNavigator 更改/重新路由屏幕堆栈
我没有使用 React Navigation V2,如果您需要有关 RNV2 的更多信息,请查看文档
这是一个例子TODO:
在 router.js 中(处理屏幕):
const Tab = TabNavigator({
Customer : {
screen: Customer,
}
});
const TabLogged = TabNavigator({
Handyman: {
screen: Handyman,
}
});
// here's the key to handle which account is logged
export const Check = SwitchNavigator({
Auth: Auth,
Account1: Tab,
Account2: TabLogged
})
创建 Auth.js 以检查是否记录了哪个帐户:
class foo extends React.component{
componentWillMount(){
this.props.navigation.navigate(usertype == "isLoggedIn" ? 'Account2' : 'Account1');
}
render(){
<View>
<ActivityIndicator size="large" color="#0000ff" />
<StatusBar barStyle="default" />
</View>
}
}
在你的 app.js 或 index.js 中:
class app extends Component{
render() {
return <check/>;
}
}