对标签的本机路由器流量身份验证流程进行反应,如在未授权的情况下在“显示帐户”选项卡中,在进行授权的情况下显示在“配置文件”选项卡

时间:2019-02-23 10:15:09

标签: react-native react-native-router-flux

在我的应用中,身份验证不是要显示的第一个屏幕。主页包含一个项目列表,用户可以浏览并查看单个项目的详细信息。为了订阅该项目,我需要将用户重定向到“帐户”标签。如果用户已登录,我想显示配置文件选项卡,否则要显示登录页面,该页面属于页面的身份验证堆栈。

那么我该如何使用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);

0 个答案:

没有答案