reactive-native 路由、页面跳转

安装

1、在你的 React Native 项目中安装react-navigation这个包

npm install --save react-navigation

2、安装 react-native-gesture-handler

npm install --save react-native-gesture-handler

3、Link 所有的原生依赖

react-native link react-native-gesture-handler

iOS 啥都不用做，在 Android 上的安装，请确保在 MainActivity.java 上完成如下修改：

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return \"Example\";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

使用

1、建立一个navigator.js存放路由配置

import React from \'react\';
import {createAppContainer, createStackNavigator, StackNavigator} from \'react-navigation\';
//引入页面
import Login from \'../page/Login\';
import Reg from \'../page/Reg\';
import App from \'../page/App\';

const AppNavigator = createStackNavigator({
        Login: {
            screen: Login,
            //不显示标题栏
            navigationOptions: {
                header: null
            }
        },
        Reg: {
            screen: Reg
        },
        App: {
            screen: App
        }
    },
    {
        //默认显示页面
        initialRouteName: \"App\"
    }
);
export default createAppContainer(AppNavigator);

2、修改项目入口文件App.js

import React from \"react\";
import {createAppContainer} from \"react-navigation\";
//上一步创建的路由配置文件
import AppNavigator from \'./src/navigator/navigator\'

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
    render() {
        return <AppContainer/>;
    }
}

3、页面跳转
在组件onPress方法中，使用如下方式跳转页面。
navigate方法接收2个参数
参数1：路由名称
参数2：传值，可省略

//相当于html中的 href=\'/Reg?key1=val1\'
this.props.navigation.navigate(\'Reg\',{key1:val1});

4、在目标页面中接收传参
getParam接收2个参数，获取不到时返回null
参数1：参数名称
参数2：默认值

this.props.navigation.getParam(\'paramsName\',defalutValue)