在 React Native Router Flux 中跨主要场景导航

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'})

这会将您的堆栈重置为根目录。

在 React Native Router Flux 中跨主要场景导航

Navigating across main scenes in React Native Router Flux

react-native

react-native-router-flux