Speaking of the navigation component of the React-Native project, it naturally reminds us of the famous React-Navigation component. Since its release, this component has attracted the attention of many developers. Currently, it has been developed to 3.x version, and some configuration and usage methods of 3.X version have also changed compared with the previous version. Here’s how to integrate the latest React Navigation component and some common navigation configurations based on the React Native APP development (Initializing TypeScript version React Native 0.60.X project).

According to the official guidance document, the biggest changes in the react-Navigation 3.X release are the installation of react-Navigation. You also need to install the react-native Gear-handler and react-native Reanimated support components, otherwise it will fail. Execute the following commands in sequence in the project root directory:

npm install react-navigation --save 
npm install react-native-gesture-handler --save 
npm install react-native-reanimated --save
Copy the code

React Native 0.60.0 automatically links to third-party Native libraries. To do this, you need to install the dependencies from Cocoapods on iOS and run the following commands:

cd ios
pod install && cd.Copy the code

As shown in the figure below, the link to the RNGestureHandler (1.4.1) and RNReanimated (1.2.0) native libraries is completed, indicating that all of the iOS configuration has been mapped.



Here’s how to configure routes step by step using React – Navigation. The first step is to implement a home page with a bottom navigation bar, as shown below:

To complete the above interface, use the createBottomTabNavigator method in the React-Navigation. TSX: page2.tsx: page2.tsx: page2.tsx: page2.tsx: page2.tsx: page2.tsx

import * as React from "react";
import { View, Text, StyleSheet } from "react-native";
export default class Page1 extends React.Component<any> {
  public render() {
    return(<View style={styles. container}> <Text> I am Page1</Text> </View>); } } const Styles = StyleSheet.create({ container: { flex: 1, justifyContent:"center",
    alignItems: "center"}});Copy the code

Then replace app.tsx with the following code:

import { createBottomTabNavigator, createAppContainer } from "react-navigation";
import Page1 from "./src/pages/Page1";
import Page2 from "./src/pages/Page2";
import Page3 from "./src/pages/Page3";
const BottomNavigator = createBottomTabNavigator(
  {
    Page1: {
      screen: Page1,
      navigationOptions: {
        title: "Page 1",
        tabBarLabel: "Page 1"
      }
    },
    Page2: {
      screen: Page2,
      navigationOptions: {
        title: "Page 2",
        tabBarLabel: "Page 2"
      }
    },
    Page3: {
      screen: Page3,
      navigationOptions: {
        title: "Page 3",
        tabBarLabel: "Page 3"
      }
    }
  },
  {
    initialRouteName: "Page1",
    tabBarOptions: {
      showIcon: false,
      activeTintColor: "# 333333",
      inactiveTintColor: "# 999999",
      activeBackgroundColor: "#f6f6f6",
      inactiveBackgroundColor: "#f6f6f6",
      labelStyle: {
        fontSize: 10
      },
      style: {
        borderTopWidth: 0,
        backgroundColor: "#f7f7f7"}}});export default createAppContainer(BottomNavigator);  Copy the code

After re-running, you should see the home page shown above with the navigation at the bottom. The main configuration parameters in createBottomTabNavigator can be found in the links

After having a home page, we often need to jump from the home page to other pages, or jump from other pages to the home page. To achieve this routing configuration, we need to use the createStackNavigator method in react navigation. TSX and page4.tsx files are added under SRC /pages. A Login button is placed in login. TSX with the code as follows:

export default class Login extends React.Component<any> {
  public render() {
    return<View style={styles. container}> <Text> I am the login page </Text> <Button title="Login"
          onPress={() => {
            this.props.navigation.navigate("Main"); }} /> </View> ); }}Copy the code

TSX = page1.tsx = page1.tsx = page1.tsx = page1.tsx = page1.tsx = page1.tsx = page1.tsx = page1.tsx = page1.tsx

export default class Page1 extends React.Component<any> {
  public render() {
    return<View style={styles. container}> <Text> I am Page1</Text> <Button title="Go to page 4"
          onPress={() => {
            this.props.navigation.navigate("Page4"); }} /> </View> ); }}Copy the code

Add the following code to app.tsx:

import { Animated, Easing } from "react-native";
import { createStackNavigator, createBottomTabNavigator,createAppContainer} from "react-navigation";
import StackViewStyleInterpolator from "react-navigation-stack/src/views/StackView/StackViewStyleInterpolator";

--------------

const AppNavigator = createStackNavigator(
  {
    Login: { screen: Login },
    Main: { screen: BottomNavigator },
    Page4: { screen: Page4 }
  },
  {
    initialRouteName: "Login",
    headerMode: "float",
    mode: "modal",
    defaultNavigationOptions: {
      header: null,
      gesturesEnabled: false
    },
    transitionConfig: () => ({
      transitionSpec: {
        duration: 300,
        easing: Easing.out(Easing.poly(4)),
        timing: Animated.timing
      },
      screenInterpolator: sceneProps =>
        StackViewStyleInterpolator.forHorizontal(sceneProps)
    })
  }
);

exportdefault createAppContainer(AppNavigator); // The citation also needs to be modifiedCopy the code

Re-run the program, this a simple jump from the login page to the home page, and then jump from the home page to other pages of the route navigation configuration is basically complete.