Question

我正在使用RNRF库在应用程序的各个屏幕之间导航。我有一个基于令牌的身份验证机制，我想在用户单击注销并删除保存在AsyncStorage中的令牌时注销用户。

我的路由器文件

import React from 'react';
import { Text } from 'react-native';
import { Scene, Router } from 'react-native-router-flux'

const RouterComponent = () => {
    return (
        <Router>
            <Scene key="root" hideNavBar>
                <Scene key="auth">
                    <Scene key="login" component={LoginForm} title="Please Login" initial />
                </Scene>
                <Scene key="main" hideNavBar>
                    <Scene 
                        key="tabbar" 
                        tabs
                        tabBarStyle={{ backgroundColor: '#fff' }}
                        showLabel={false}
                    >
                        <Scene key='homeTab' title="Home" icon={TabIcon} initial>
                            <Scene 
                                key="home"
                                component={Home}
                            />
                        </Scene>
                        <Scene key='moreTab' title="More" icon={TabIcon}>
                            <Scene 
                                key="more"
                                component={More}
                                title="More"
                            />
                        </Scene>
                    </Scene>
                </Scene>
            </Scene>
        </Router>
    );
};

export default RouterComponent;

我的注销按钮在“更多”屏幕中-嵌套在Tabbar场景内。如何从“更多”导航到“登录”屏幕，这样看起来好像不是从右侧推入新的登录屏幕？

更多组件文件-

import React, { Component } from 'react';
import { AsyncStorage } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { Button } from './common';

class More extends Component {
    onButtonPress() {
        AsyncStorage.removeItem('token').then(() => {
            Actions.popTo('login');
        });   
    }

    render() {
        return (
            <Button onPress={this.onButtonPress.bind(this)}>Logout</Button>
        );
    }   
}

export default More;

Actions.popTo（'login'）似乎不起作用。我需要重组路由器文件吗？

Answer 1

尝试Actions.auth({ type: 'reset'})

这会将您的堆栈重置为root。

在React Native Router Flux中浏览主要场景

1 个答案: