React Native 页面跳转之全局封装Android和IOS（二）

之前我已经写了（一），但是后来发现，只能在Android中使用，IOS无效果，因前段时间自己项目比较赶，一直没时间整理，这次抽时间重新整理了下；这样的话所有组件（包括子组件）页面跳转，再也不用把navigation传来传去了，直接调用两个函数搞定：打开界面goOpenPage()、关闭界面goBackPage()；

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

项目结构如下：

一：页面跳转导航配置与全局navigation配置类index.js

import React from "react";
import {createStackNavigator} from "react-navigation";
import {appNavigation} from "./src/util/JumpUtils";
import Demo1 from "./src/Demo1";
import Demo2 from "./src/Demo2";
import Demo1Children from "./src/Demo1Children";

//导航配置
const appNav = createStackNavigator({
    demo1: {
        screen: Demo1,
    },
    demo2: {
        screen: Demo2,
    },
    demo1Children: {
        screen: Demo1Children,
    },
});

//全局navigation配置
appNav.navigationOptions = (navigation) => {
    appNavigation(navigation);
};

//项目注册
AppRegistry.registerComponent('appkey', () => appNav);

二：页面跳转封装类JumpUtils.js

import React from 'react';
import {Platform} from 'react-native';

let mNavigation; //导航

/**
 * 导航设置
 * @param navigation 导航信息
 */
export function appNavigation(navigation) {
    mNavigation = navigation.navigation ? navigation.navigation : navigation;
}

/**
 * 跳转页面
 * @param pageName 路由名称
 * @param obj 传入参数
 * @param isSinglePage 是否单例
 */
export function goOpenPage(pageName, obj, isSinglePage) {
    if (!mNavigation || !pageName) return;
    if (isSinglePage) { //栈内只存在一个实例，同一个页面打开多次，显示的是同一个页面
        mNavigation.navigate(pageName, obj ? obj : {});
    } else { //每次都打开一个新页面
        mNavigation.push(pageName, obj ? obj : {});
    }
}

/**
 * 返回页面
 * @param pageName 路由名称
 */
export function goBackPage(pageName) {
    if (!mNavigation) return;
    let {state: {routes}} = mNavigation;
    if (routes && routes.length > 0) {
        if (pageName) { //返回到指定的页面
            mNavigation.navigate(pageName);
        } else { //默认返回到前一个页面
            mNavigation.goBack(routes[routes.length - 1].key);
        }
    }
}

/**
 *  是否首页面
 * @returns {*}
 */
export function onMainScreen() {
    if (Platform.OS === 'android') { //为了安卓双击返回键退出应用
        return !mNavigation
            || !mNavigation.state
            || !mNavigation.state.routes
            || (mNavigation.state && mNavigation.state.routes && mNavigation.state.routes.length <= 1);
    }
    return false;
}

三：页面跳转与返回

（1）方法如下：

goBackPage();//返回前一个界面
goBackPage('demo1');//返回到指定界面demo1
goOpenPage('demo2');//跳转到页面demo2
goOpenPage('demo2',{id: 111});//带参跳转到页面demo2

（2）相关代码如下：

1、Demo1.js

import React, {Component} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import Demo1Children from "./Demo1Children";
import {goOpenPage} from "./util/JumpUtils";

type Props = {};
export default class Demo1 extends Component<Props> {

    static navigationOptions = ({navigation}) => {
        const {params} = navigation.state;
        return {
            headerTitle: 'demo1',
        }
    };

    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <View style={styles.container}>
                <Demo1Children/>
                <Text onPress={() => goOpenPage('demo2')}>跳转到demo2</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

 2、Demo2.js

import React, {Component} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {goBackPage} from "./util/JumpUtils";

type Props = {};
export default class Demo2 extends Component<Props> {

    static navigationOptions = ({navigation}) => {
        const {params} = navigation.state;
        return {
            headerTitle: 'demo2',
        }
    };

    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <View style={styles.container}>
                <Text onPress={() => goBackPage()}>返回到demo1</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

3、Demo1Children.js

import React, {Component} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {goOpenPage} from "./util/JumpUtils";

type Props = {};
export default class Demo1Children extends Component<Props> {

    static navigationOptions = ({navigation}) => {
        const {params} = navigation.state;
        return {
            headerTitle: 'demo1Children',
        }
    };

    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <View style={styles.container}>
                <Text onPress={() => goOpenPage('demo2', {id: 1})}>带参跳转到demo2</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});