在我的应用中,身份验证不是要显示的第一个屏幕。主页包含一个项目列表,用户可以浏览并查看单个项目的详细信息。为了订阅该项目,我需要将用户重定向到“帐户”标签。如果用户已登录,我想显示配置文件选项卡,否则要显示登录页面,该页面属于页面的身份验证堆栈。
那么我该如何使用react-native-router-flux来做到这一点,根据我的理解,我尝试了以下方法,但它不起作用。我本机反应并对此流程感到困惑。
如果还有另一个可以帮助我实现此预期行为的库,我想尝试一下。
Routing.tsx
<Router>
<Scene key="root" hideNavBar>
<Tabs key="tabbar" swipeEnabled tabBarStyle={styles.tabBar} showLabel={false} lazy>
<Scene key="homeTab" title="Home" iconName="ios-home" icon={TabIcon} hideNavBar>
<Scene key="home" component={Home} title="Home Page" initial />
<Scene key="details" component={ContentDetail} />
</Scene>
<Scene key="account" component={Splash} hideNavBar title="Profile" iconName="ios-person" icon={TabIcon}>
<Scene key="profileTab" title="Profile" iconName="ios-person" icon={TabIcon} hideNavBar>
<Scene key="profile" component={Profile} initial />
</Scene>
<Scene key="authTab" title="Account" iconName="ios-person" icon={TabIcon} hideNavBar>
<Scene key="login" component={Login} initial />
<Scene key="signup" component={Signup} />
<Scene key="verifyTac" component={VerifyTac} />
</Scene>
</Scene>
<Scene key="settingTab" title="Settings" iconName="ios-settings" icon={TabIcon} hideNavBar>
<Scene key="accInfo" component={AccountInfo} title="Account Info Page" initial />
</Scene>
</Tabs>
<Scene
key="search"
component={Search}
modal
hideNavBar
/>
</Scene>
</Router>
Splash.tsx
class Splash extends React.Component<Props, {}> {
constructor(props: Props) {
super(props);
}
componentDidMount() {
if (this.props.user && this.props.user.accessToken) Actions.replace('profileTab');
else Actions.replace('authTab');
}
render() {
console.log(' Splash props: ', this.props);
return <View></View>
}
}
const mapStateToProps = state => {
return {
user: state.authReducer
}
}
export default connect(mapStateToProps)(Splash);