堆栈导航器可以在反应导航中有 2 条不同的路线吗
Can a stack navigator have 2 different routes in react navigation
我的项目结构如下所示:
Tab navigator
|-Tab1
|-Tab2
|-stack navigator
|-login
|
screen1
|
screen2
|
screen3
|-Tab3
|-Tab4
我希望在输入登录屏幕的用户名和密码后,我的堆栈导航器路由从屏幕 1 开始。有什么办法可以做到这一点?
我们可以 reroute/change stack navigator 的路由吗?
使用SwitchNavigator到change/reroute屏幕堆栈
I'm not using React Navigation V2, you should check the doc if you need more information about RNV2
这是一个例子TODO
:
in 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/>;
}
}
我的项目结构如下所示:
Tab navigator
|-Tab1
|-Tab2
|-stack navigator
|-login
|
screen1
|
screen2
|
screen3
|-Tab3
|-Tab4
我希望在输入登录屏幕的用户名和密码后,我的堆栈导航器路由从屏幕 1 开始。有什么办法可以做到这一点? 我们可以 reroute/change stack navigator 的路由吗?
使用SwitchNavigator到change/reroute屏幕堆栈
I'm not using React Navigation V2, you should check the doc if you need more information about RNV2
这是一个例子TODO
:
in 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/>;
}
}