【React-native】導航組件 react-navigation 的使用

之前項目一直用的老版本的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