注意：我主要用的包管理工具是yarn（也可以用npm或者cnpm）；這裡只介紹第三方庫的基本整合，屬性和方法可以去參考文章和github查詢學習。

個人意見：整合第三方庫最好不要制定固定的版本，因為可能會和你的react native版本不相符，導致報錯！！！

這篇文章主要記錄一些React Navigation的基本用法....

前言：在 web 瀏覽器中, 你可以使用 (<a>) 標籤作為錨點，連結到不同的頁面。 當用戶單擊某個連結時, 該 URL 就會被推送到瀏覽器歷史記錄堆疊。 當用戶點選返回按鈕時, 瀏覽器會從歷史堆疊頂部刪除正在訪問的頁面, 因此當前頁現在就成了以前訪問過的頁面。 React Native沒有像Web瀏覽器那樣的內建全域性歷史堆疊的想法 -- 這就是 React Navigation 存在的意義。 ===>>> 這個是React Navigation官方對其本身的描述。

頁面跳轉對於app是非常重要的，但react-native本身在這上面是沒有很好的解決方法的（兩端公用），此時React Navigation這個庫就非常重要了也非常好用！

安裝：yarn add [email protected]（npm install --save react-navigation） 

        ==>> 我的react-native版本是 0.55.0；而React Navigation官網使用的版本是2.0.0-beta.6，我用了報錯，不知道什麼原因！

        ==>>後來我降了幾次版本，到1.0.0-beta.27可以用了（1.0.0-beta.27是以前專案中用過的版本，不過不是我整合的！）

該庫只是一個js庫，安裝後既可以用了！

簡單使用：StackNavigator管理路由

我的程式碼都是放在app目錄下的：

1. pageOne.js

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

export class PageOne extends Component{
    static navigationOptions = {
        header: null,           //去除頁面中頂部的空白導航欄
    };
    constructor() {
        super();
        this.state = {
        }
    }

    goTwo(){
        console.log(this.props.navigation);
        const {dispatch, goBack, navigate, setParams, state} = this.props.navigation;
        navigate('two',{page:2})
    }

    render(){
        return(
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text style={{fontSize:24,color:'red'}}>頁面one</Text>

                <Button
                    title="去下一頁"
                    onPress={() => this.goTwo()}
                />
            </View>

        )
    }
}
 

2. pageTwo.js

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

export class PageTwo extends Component{
    static navigationOptions = {
        header: null,            //去除頁面中頂部的空白導航欄
    };
    constructor() {
        super();
        this.state = {
        }
    }

    componentDidMount(){
        console.log(this.props.navigation);
        const {dispatch, goBack, navigate, setParams, state} = this.props.navigation;
        console.log('=====>>>>>',state)
    }

    goBack(){
        console.log(this.props.navigation);
        const {dispatch, goBack, navigate, setParams, state} = this.props.navigation;
        goBack();
    }

    render(){
        return(
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text style={{fontSize:24,color:'green'}}>頁面Two</Text>

                <Button
                    title="返回"
                    onPress={() => this.goBack()}
                />
            </View>
        )
    }
}

3. app.js

import React, {Component} from "react";

//匯入stack導航元件
import { StackNavigator } from 'react-navigation';

import {PageOne} from './pageOne';      //引入PageOne
import {PageTwo} from './pageTwo';      //引入PageTwo

//導航註冊
export default App = StackNavigator(
    {
        two: { screen: PageTwo },
        Home: { screen: PageOne },
    },
    {
        initialRouteName: 'Home',           //initialRouteName設定初始路由為Home
    }
);

最後，說一下導航模組組合：

• 命令結構：

• main、task模組的nav.js（各個模組的導航檔案）

• app.js  主檔案導航模組

• 導航模組組合思路：即把各個模組的理由構建成一個個的物件，然後在主導航檔案中引入各個模組的理由，並把它們合併成（Object.assign方法，也可以用 ... 擴充套件）一個物件，放到react-navigation的StackNavigator方法中管理即可。

總結：

  ==>> 去除頁面中頂部導航欄

  ==>>  

如果需要統一去除，需要總導航檔案中設定：

詳細設定可以去看文件。。

                  https://www.jianshu.com/p/7d435e199c96   （這個文章中有NavigationActions的用法；NavigationActions.reset可以清楚路由資訊）

文章僅為本人學習過程的一個記錄，僅供參考，如有問題，歡迎指出！

對部落格文章的參考，若原文章博主介意，請聯絡刪除！請原諒