之前项目一直用的老版本的React-native（0.35.0），新的导航组件一直没有接触，近来想接触，但是找了半天却发现都实现不了，后来终于折腾好了，所以记录一下。

谈组件不写清楚版本完全就是耍流氓！
谈组件不写清楚版本完全就是耍流氓！
谈组件不写清楚版本完全就是耍流氓！

恶心的事儿说三遍！

我所使用的 react-native，react-navigation以及所需react-native-gesture-handler版本（非常终于，各版本均不一样）：

 "react-native": "^0.53.0",
 "react-navigation": "^2.9.1",
 "react-native-gesture-handler": "^1.0.9"

流程步骤：

1，安装控件。

2，主界面入口配置。

3，跳转页面。

一，安装控件

npm install react-native-gesture-handler@^1.0.9

npm install react-navigation@^2.9.1

二，主界面入口配置

项目结构：

主界面入口配置：

/**
 * Created by supervons on 2018/12/20.
 * 入口界面，控制路由
 * app entrance interface page
 */

import React, {Component} from 'react';
import {createStackNavigator} from "react-navigation";
import LoginPage from './commonPage/Login/loginPage'
import MainPage from './commonPage/MainPage';
import SignBoardView from './commonPage/SignTest/signBoardView';
import PersonalCenter from './commonPage/personalCenter/personalCenter';

const RootStack = createStackNavigator({
        Login: { //登录界面
            screen: LoginPage
        },
        MainPage: { //主界面
            screen: MainPage
        },
        PersonalCenter: { //我的（个人中心）
            screen: PersonalCenter
        },
        SignBoardView: { //手写签名页面
            screen: SignBoardView
        },

    },
    {//定义配置
        initialRouteName: 'Login',     //设置初始路由为登录界面
        navigationOptions: {           //导航栏通用设置
            headerStyle: {
                backgroundColor: '#7276ff',
            },
        }
    }
)

export default class App extends Component {

    render() {
        return (
            <RootStack/>
        )
    }
}

三，跳转页面

使用如下即可替换当前页面，不能返回的，可用于登录。

 this.props.navigation.replace('MainPage');

使用如下即可跳转页面（页面需在入口文件中注册）。

this.props.navigation.push('MainPage');

项目示例gitHub：https://github.com/supervons/commonProject

【React-native】导航组件 react-navigation 的使用