混合开发中实现原生传入的参数跳转不同RN界面

当在混合开发中，从原生界面跳转到RN界面，在跳转到RN界面时，为了不再启动一个原生的壳加载RN，可以采用了NavigationActions的reset来实现重置路由

在使用React navigation的时候，使用yarn add react-navigation安装是最新版本的，目前最新版本是3.0.2,如果在混合开发中使用3.x以上会报错，所有只能使用3.x一下的，yarn add react-navigation@2.9.1

1. 定义一个全部变量Global.js

export default {
    pageIndex:'',
    pageTitle:'rn page title',
}

2. 定义App.js，在index.js中进行注册AppRegistry.registerComponent('RNApp', () => App);

import React, { Component } from 'react';

import {AppStackNavigator} from './AppStackNavigator';
import Global from './Global';

export default class App extends Component {
    /**
     * 视图树挂载前调用
     * 获取到native返回回来的信息保存到全局变量中
     */
    componentWillMount() {
        Global.pageIndex=this.props.pageIndex;
    }
    render(){
        return (
            <AppStackNavigator/>
        )
    }
}

3. 定义一个路由器AppStackNavigator.js

import {createStackNavigator} from 'react-navigation';

import HomePage from './page/HomePage';
import Page1 from './page/Page1';
import Page2 from './page/Page2';
import InitPage from './page/InitPage';
/**
 * 导航器
 */
export const AppStackNavigator = createStackNavigator({
        InitPage:InitPage,
        HomePage: HomePage,
        Page1:Page1,
        Page2:Page2
});

4. 定义InitPage.js实现页面中转功能

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text
} from 'react-native';
import Gloabl from '../Global';
import {StackActions, NavigationActions} from 'react-navigation';

export default class InitPage extends Component {
    componentWillMount() {
        this.props.navigation.dispatch(StackActions.reset({
            index: 0,
            actions: [
                NavigationActions.navigate({routeName : Gloabl.pageIndex})
            ]
        }));
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={{fontWeight: 'bold',color:'#2d2d2d',padding:50}}>
                    Please check operation and re-enter the interface
                </Text>
            </View>
        )
    }
}

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

5. HomePage.js、Page1.js、Page2.js在这里就不写出来了

源码连接

效果图：