简介

React Navigation是RN目前最主流导航方案，目前最新的稳定版本为5.x，详情参考

学习视频

可以参考以下视频：
https://www.bilibili.com/video/BV1VV411m74Z/

React Navigation 安装

1. react-native init Navigation 新建项目

2.使用WebStorm打开项目，在控制台执行下面命令

3.npm install @react-navigation/native 安装导航核心模块

该库包含三类组件：
StackNavigator： 普通页面跳，可传递参数，下面使用就是这个
TabNavigator：   类似底部导航栏，用来在同一屏切换不同页面
DrawerNavigator：侧滑菜单导航栏，用于轻松设置带抽屉的屏幕

4.npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view 安装相关依赖

5.npx pod-install

6.修改项目中node_modules 文件中的端口号，注意全局替换，只要执行npm 或yarn 命令都需要从新修改。

代码实现

1.引入组件

import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';

2.引入需要跳转的界面

import One from './OnePage';  //项目运行看到的第一个界面
import Two from './TwoPage';  //点击OnePage上的按钮跳转的界面

3.创建栈导航
Stack提供APP屏幕之间切换的能力，它是以栈的形式来管理屏幕之间的切换，新切换到的屏幕会放在栈的顶部

const Stack = createStackNavigator();

4.将界面放入栈导航里

const App: () => Node = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="One" component={One} />
        <Stack.Screen name="Two" component={Two} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

5.One界面完整代码

import React, { Component } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default class One extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View>
                <Button title="点击跳转" onPress={() => this.props.navigation.navigate('Two')} />
            </View>
        )
    }
}

6.Two界面代码

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default class Two extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <View>
          <Text>hello world !</Text>
      </View>
    )
  }
}