React-native 路由 Navigation 各种方法

前言

在移动APP中，我们经常会遇到登陆成功，或者注销后，不允许返回上一页面，这就需要我们清楚栈中的其余view, RN中我们应该如何处理呢？

方法

主要原理是借助于onDidFocus和immediatelyResetRouteStack两个方法实现。

对此我们先看看Navigator提供给我们默认的方法有哪些？

• getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。
• jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。
• jumpForward() - 上一个方法不是调到之前的路由了么，用这个跳回来就好了。
• jumpTo(route) - 跳转到已有的场景并且不卸载。
• push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去
• pop() - 跳转回去并且卸载掉当前场景
• replace(route) - 用一个新的路由替换掉当前场景
• replaceAtIndex(route, index) - 替换掉指定序列的路由场景
• replacePrevious(route) - 替换掉之前的场景
• resetTo(route) - 跳转到新的场景，并且重置整个路由栈
• immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
• popToRoute(route) - pop到路由指定的场景，在整个路由栈中，处于指定场景之后的场景将会被卸载。
• popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。

在具体使用中，我们需要添加一个onDidFocus属相，然后判断当前路由是否要求重置整个线路。

<Navigator
    ref="navigator"
    initialRoute={{name: 'LaunchView'}}
    renderScene={this.renderScene}
    configureScene={this.configureScene}
    onDidFocus={(route) => {
        if (route.reset) {                    this.refs.navigator.immediatelyResetRouteStack([{ name: route.name }])
        }
}}
/>

使用方法：

this.props.navigator.push({name: 'yourview Name',reset:true});

ok，搞定了！

以下代码为项目中实践所得。

Home.js文件：

componentDidMount() {
        this.onRefresh();
        // this._bootstrapAsync();

        AsyncStorage.getItem(constString.loginStatus).then(value => {
            if (value === 'true'){
                this.props.navigation.navigate('Home');
            } else {
                // 路由重置...
                const resetAction = StackActions.reset({
                    index: 0,
                    actions: [
                        NavigationActions.navigate({routeName: 'Login'}),  //Login 要跳转的路由
                    ],
                });
                this.props.navigation.dispatch(resetAction);
            }
        });
    }

Login.js文件：

 Toast.add('登录成功');

                // 登录成功，保存
                AsyncStorage.setItem(constString.loginStatus, 'true');
                // const resetAction = StackActions.reset({
                //     index: 0,
                //     actions: [
                //         NavigationActions.navigate({routeName: 'BottomTabNavigator'}),  // Login 要跳转的路由
                //     ],
                // });
                // _this.props.navigation.dispatch(resetAction);
                _this.props.navigation.replace('BottomTabNavigator');//replace(route) - 用一个新的路由替换掉当前场景

 

Seting.js文件：

Toast.add('退出成功');

                        AsyncStorage.setItem(constString.loginStatus, 'false');
                        // 跳转到登录页面
                        const resetAction = StackActions.reset({
                            index: 0,
                            actions: [
                                NavigationActions.navigate({routeName: 'Login'}),  //Login 要跳转的路由
                            ],
                        });
                        this.props.navigation.dispatch(resetAction);