一、创建一个React Native项目

在命令行终端执行以下命令，创建一个新的React Native工程：

npx react-native init react_navigation_demo

二、安装及配置react-navigation相关依赖

1、安装react-navigation核心包

在已创建好的React Native中通过以下命令安装react-navigation核心包依赖：

npm install react-navigation --save

2、安装react-navigation扩展包

在安装完react-navigation核心包之后，还需要安装相关的扩展包，通过以下命令进行安装：

npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view --save

3、配置react-native-gesture-handler

扩展包安装完成之后需要针对react-native-gesture-handler扩展包进行相应的配置，以保证在Android设备上可以正常运行。打开项目中的react_navigation_demo/android/app/src/main/java/com/react_navigation_demo/MainActivity.java文件。在文件头部添加以下代码：

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

在该文件的getMainComponentName方法之后添加以下代码：

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

添加代码之后，文件内容如图所示：

4、引入react-native-gesture-handler

在当前React Native项目的入口文件，例如：index.js或者app.js文件的头部通过以下方式引入react-native-gesture-handler。

import 'react-native-gesture-handler';

三、创建react-navigation配置文件及页面

1、创建react-navigation配置文件

在项目的根目录下创建react-navigation配置文件，名称为navigation.js。创建完成之后的目录结构如下：

2、创建页面

在根目录下创建pages文件夹，用于保存页面。在pages目录中创建Home文件夹作为主页的保存目录，创建About文件夹作为关于页面的保存目录。创建完成之后项目目录如图所示：

在pages/Home/index.js中添加以下代码，可以直接复制粘贴：

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

export default class Index extends Component {
  render() {
    return <View>
      <Text>
        Home页面
      </Text>
    </View>
  }
}

在pages/About/index.js中添加以下代码，可以直接复制粘贴：

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

export default class Index extends Component {
  render() {
    return <View>
      <Text>
        About页面
      </Text>
    </View>
  }
}

在navigation.js文件中进行导航配置，添加以下代码，可以直接复制粘贴：

import React from 'react';
import HomePage from './pages/Home';
import AboutPage from './pages/About';
import { createStackNavigator } from 'react-navigation-stack';

const AppNavigator = createStackNavigator({
  // 导航名称
  Home: {
    screen: HomePage, // 导航指向的页面
    navigationOptions: {
      title: "主页", // 设置页面title
    }
  },
  // 导航名称
  About: {
    screen: AboutPage, // 导航指向的页面
    navigationOptions: {
      title: "关于", // 设置页面title
    }
  }
}, {
  initialRouteName: 'Home', // 设置默认的导航页面，应用一打开首先进入Home页面
});

export default AppNavigator;

修改app.js文件，引入创建的导航配置文件，最终修改app.js文件如下，可以直接复制粘贴：

import React, {Component} from 'react';
import {createAppContainer} from 'react-navigation';
import AppNavigator from './navigation';
import 'react-native-gesture-handler';

const AppContainer = createAppContainer(AppNavigator);

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

四、通过导航切换页面

1、页面跳转逻辑

在页面中从react-native中引入Button组件，通过onPress()方法，在点击按钮的时候使用this.props.navigation.navigate()方法实现页面跳转切换。navigate()方法接收的是之前在navigation.js中配置的页面导航的名称。

在pages/Home/index.js中添加完导航跳转逻辑之后的代码如下，可以直接复制粘贴覆盖原来的代码：

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

export default class Index extends Component {
  render() {
    return <View>
      <Text>
        Home页面
      </Text>
      <Button title={"跳转到About页面"} onPress={() => this.props.navigation.navigate('About')}/>
    </View>
  }
}

在pages/About/index.js中添加完导航跳转逻辑之后的代码如下，可以直接复制粘贴覆盖原来的代码：

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

export default class Index extends Component {
  render() {
    return <View>
      <Text>
        About页面
      </Text>
      <Button title={"跳转到Home页面"} onPress={() => this.props.navigation.navigate('Home')}/>
    </View>
  }
}

在终端输入npm run android启动项目，运行界面如图所示：

点击按钮可以跳转到关于页面：