React Native 頁面跳轉之全局封裝Android（一）

爲什麼寫這篇文章呢？主要爲了解決使用react-navigation時，在子組件頁面跳轉不便的問題

注：需要結合'react-navigation'一起使用，配置如下（下面的‘appKey’要更換自己工程的appKey）：

 

import {StackNavigator} from "react-navigation";

const appNav = StackNavigator({
    demo1: {
        screen: Demo1,
    },
    demo2: {
        screen: Demo2,
    },
});

AppRegistry.registerComponent('appKey', () => appNav);

一：頁面跳轉封裝類JumpUtils.js

import {mNavigation, mRouters} from "../App";

export function goBackPage(pageName) {
    if (!mRouters || !mNavigation) return;
    for (let i = 0; i < mRouters.length; i++) {
        if (!pageName) {
            mNavigation.goBack(mRouters[mRouters.length - 1].key);
        } else {
            if (mRouters[i].routeName === pageName) {
                if (i + 1 === mRouters.length) {
                    mNavigation.goBack();
                } else {
                    mNavigation.goBack(mRouters[i + 1].key);
                }
            }
        }
    }
}

export function goOpenPage(pageName, obj) {
    if (!pageName || !mNavigation) return;
    mNavigation.navigate(pageName, obj ? obj : {});
}

二：全局路由配置App.js

 

export let mRouters, mNavigation;
export default class App extends Component {
    static navigationOptions = {
        header: ({navigation}) => {
            let {state: {routes}} = navigation;
            mNavigation = navigation;
            mRouters = routes;
        },
    };
}

三：好了，現在就能愉快的頁面跳轉了，效果如下：

 

goBackPage();//返回上一界面
goBackPage('demo1');//返回指定界面
goOpenPage('demo2');//跳轉頁面
goOpenPage('demo2',{id: 111});//帶參跳轉頁面

注：Android和IOS都能兼容使用，請看另一篇文章：React Native 頁面跳轉之全局封裝Android和IOS（二）

鏈接地址：https://blog.csdn.net/baidu_37831324/article/details/84673120