React Native integrated react-navigation (navigation unit), and code sample

React Native integrated react-navigation (navigation unit), and code sample

1, create a test project navTest

#使用命令
react-native init navTest

#使用webstrom创建

2, mounting react-navigation

• Official Links: https://reactnavigation.org/docs/en/getting-started.html

#安装
yarn add react-navigation
# or 
npm install --save react-navigation

3、安装react-native-gesture-handler

1): Installation

#安装
yarn add react-native-gesture-handler
# or 
npm install --save react-native-gesture-handler

#链接所有本机依赖
react-native link react-native-gesture-handler

2): Android configuration requires repair MainActivity.java file

#修改/android/app/src/main/java/com/navtest/MainActivity.java文件

#需要导入的依赖
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

#需要重写的方法
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }

4, configuration and testing.

1): Modify the file entry App.js

import React from "react";
import {Text, View} from "react-native";
import {createAppContainer, createStackNavigator} from "react-navigation";

class HelloScreen extends React.Component {
    render() {
        return (
            <View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
                <Text>Hello react-navigation</Text>
            </View>
        );
    }
}

const AppNavigator = createStackNavigator({
    HelloScreen: {
        screen: HelloScreen,
        navigationOptions: {
            title: 'Hello'
        }
    }
});

export default createAppContainer(AppNavigator);

2): Running

#运行到安卓模拟器
react-native run-android

3): renderings