由于最近要用RN寫app，就趕緊看看，可是沒有那么多時(shí)間，就一邊看一邊寫了，所以學(xué)的沒有那么細(xì)很多坑， 先來(lái)實(shí)現(xiàn)，最后來(lái)看看坑吧

運(yùn)行環(huán)境：RN版本0.48以上
使用最新官網(wǎng)推薦的導(dǎo)航器：React Navigation 實(shí)現(xiàn)
首先安裝：
//進(jìn)入你項(xiàng)目的根目錄下執(zhí)行
npm install --save react-navigation 或者yarn add react-navigation
新建文件夾a.js，b.js，最終效果是a跳轉(zhuǎn)到b，b里面可以back回來(lái)。

react-navigation中我們要用的就是StackNavigator，他可以實(shí)現(xiàn)頂部導(dǎo)航欄跳轉(zhuǎn)的效果
首先比較重要的一個(gè)概念就是，參與跳轉(zhuǎn)的頁(yè)面，要全部都在個(gè)組件里面注冊(cè)一下，然后在index.js入口里面注冊(cè)，因?yàn)閕ndex.js里面也是直接引入的App.js，所以我們也可以在這里注冊(cè)到應(yīng)用程序中(其實(shí)就是引入渲染下)，默認(rèn)會(huì)渲染第一個(gè)注冊(cè)的頁(yè)面。

首先注冊(cè)我們所有參與導(dǎo)航跳轉(zhuǎn)的頁(yè)面，在StackNavigator注冊(cè)。隨便建一個(gè)js文件，如application.js，如下：
import {
StackNavigator,
} from 'react-navigation';

import React from 'react';

import a from './a';
import b from './b';

/*

• 初始化StackNavigator
  */
  export default App = StackNavigator({
  //默認(rèn)加載第一個(gè)頁(yè)面，用來(lái)注冊(cè)需要跳轉(zhuǎn)的頁(yè)面
  a: {
  screen: a,
  },
  b:{
  screen: b,
  }
  });

然后在App.js里面注冊(cè)到我們的應(yīng)用里面（因?yàn)閕ndex.js入口文件直接引入了它并渲染了所以在這里也可以），如下：

import React, { Component } from 'react';
import Myapp from './src/application';

export default class App extends Component {
render(){
return (
<Myapp></Myapp>
)
}

}

然后a.js頁(yè)面，如下：
import React, { Component } from 'react';
import { Text } from 'react-native';

export default class HelloWorldApp extends Component {
//設(shè)置頂部導(dǎo)航欄的內(nèi)容
static navigationOptions = ({navigation, screenProps}) => ({
//左側(cè)標(biāo)題
headerTitle: '我是主頁(yè)面',
//設(shè)置跳轉(zhuǎn)頁(yè)面左側(cè)返回箭頭后面的文字，默認(rèn)是上一個(gè)頁(yè)面的標(biāo)題
headerBackTitle: null,
//頂部標(biāo)題欄的樣式
headerStyle: styles.headerStyle,
//頂部標(biāo)題欄文字的樣式
headerTitleStyle: styles.headerTitleStyle,
});
render() {
return (
<Text style={styles.button} onPress={() => {
this.props.navigation.navigate('b', {key: '傳遞的標(biāo)題'})}}>跳轉(zhuǎn)到b</Text>
<Text>Hello world!</Text>
);
}
}
點(diǎn)擊文本后跳轉(zhuǎn)到b頁(yè)面，然后還有傳值。

然后b.js頁(yè)面，如下：
import React, { Component } from 'react';
import { Text } from 'react-native';

export default class HelloWorldApp extends Component {
render() {
return (
<Text>Hello b!</Text>
);
}
}
然后沒啦，b頁(yè)面會(huì)自動(dòng)有一個(gè)返回的按鈕。
然后就實(shí)現(xiàn)了頁(yè)面跳轉(zhuǎn)的功能，然后坑來(lái)了，<Myapp></Myapp>，注冊(cè)到應(yīng)用時(shí)，引入的初始化注冊(cè)頁(yè)面的application.js文件，命名不要全小寫或大寫，一定要首字母大寫，也就是不要這樣<myapp></myapp>我也不知道為什么，沒去查，要不然會(huì)大紅屏報(bào)錯(cuò)。

//頁(yè)面跳轉(zhuǎn) 第一個(gè)參數(shù)則是我們?cè)?code>application.js中注冊(cè)的頁(yè)面
//第二個(gè)參數(shù)則是傳遞的參數(shù)，也可以不傳。
this.props.navigation.navigate('Detail', {key: '傳遞的標(biāo)題'}

//跳轉(zhuǎn)頁(yè)面的第二種寫法
const {navigate} = this.props.navigation;
navigate('Detail', {key: '傳遞的參數(shù)'});

//沒有參數(shù)的情況
const {navigate} = this.props.navigation;
navigate('Detail');

獲取a頁(yè)面?zhèn)鬟f過來(lái)的值
navigation.state.params.key //key就是你自己設(shè)置的鍵

導(dǎo)航欄的設(shè)置：
headerTitle: '標(biāo)題' ===> 導(dǎo)航欄的標(biāo)題
header: null ===> 隱藏導(dǎo)航欄
headerTintColor: 'white' ===> 返回按鈕的顏色
headerTitleStyle: {} ===> 導(dǎo)航欄文字的樣式
headerStyle: {} ===> 導(dǎo)航欄的樣式
headerRight: (< View/>) ===> 設(shè)置頂部導(dǎo)航欄友邊的視圖 和 解決當(dāng)有返回箭頭時(shí)，文字不居中
headerLeft: (< View/>) ===> 設(shè)置導(dǎo)航欄左邊的視圖 和 去除返回箭頭
headerBackTitle: null ===> 設(shè)置跳轉(zhuǎn)頁(yè)面左側(cè)返回箭頭后面的文字，默認(rèn)是上一個(gè)頁(yè)面的標(biāo)題
gestureResponseDistance: {horizontal: 300} ===> //設(shè)置滑動(dòng)返回的距離