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

Question

我正在使用RNRF库来浏览我的应用程序中的屏幕。我有一个基于令牌的身份验证机制，我想在用户点击Logout时删除用户，并删除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。