此篇教程會(huì)持續(xù)更新啃炸。崭放。。
為了能夠讓閱讀者容易上手担平，我先將簡(jiǎn)單的代碼附上李剖，閱讀者拷貝到自己的代碼看看效果芒率，然后再看我的教程一點(diǎn)點(diǎn)深入了解createStackNavigator，達(dá)到靈活運(yùn)用篙顺。
演示步驟
1）首先使用終端切換到項(xiàng)目所在目錄下偶芍，輸入：npm install --save react-navigation，等待安裝成功慰安，一般學(xué)習(xí)到這里自己的電腦上肯定已經(jīng)安裝好了npm腋寨，這個(gè)在安裝node的時(shí)候會(huì)默認(rèn)安裝；
2）下面這個(gè)是配置路由的頁面化焕，你將這個(gè)頁面放在單獨(dú)的組件中萄窜，這個(gè)組件不能含有其他組件，我取名叫Main.js:
import {createStackNavigator} from 'react-navigation';
import Test01 from './Test01';
import Test02 from './Test02';
const App = createStackNavigator({
? ? Test01:{
? ? ? ? screen:Test01,
? ? ? ? navigationOptions:({navigation})=>({
? ? ? ? ? ? title:'這是Test01的標(biāo)題'
? ? ? ? })
? ? },
? ? Test02:{
? ? ? ? screen:Test02,
? ? ? ? navigationOptions:({navigation})=>({
? ? ? ? ? ? title:'這是Test02的標(biāo)題'
? ? ? ? })
? ? }
},{
? ? initialRouteName:'Test01'
});
module.exports = App;
記住導(dǎo)入的那兩個(gè)文件必須與這個(gè)文件在同一目錄撒桨，如果不在需要自己修改上面的路徑（假如查刻，你還不知道怎么導(dǎo)入的話，一般學(xué)到這里都了解了凤类，你就按照我的要求放在同一個(gè)文件夾中穗泵，同時(shí)希望你能去看相關(guān)的教程來提高自己）；
3）新建文件名稱為：Test01.js：
import React,{Component} from 'react';
import {Button} from 'react-native';
export default class Test01 extends Component{
? ? render(){
? ? ? ? return (
? ? ? ? ? ? <Button onPress={()=>this.props.navigation.navigate('Test02')} title={'跳轉(zhuǎn)到test02頁面'} />
? ? ? ? );
? ? }
}
4）新建文件名稱：Test02.js：
import React,{Component} from 'react';
import {Text} from 'react-native';
export default class Test01 extends Component{
? ? render(){
? ? ? ? return (
? ? ? ? ? ? <Text>這是test02頁面</Text>
? ? ? ? );
? ? }
}
這樣就完成工作了谜疤，接下來看看效果：
當(dāng)我點(diǎn)擊按鈕“跳轉(zhuǎn)到test02頁面”以后佃延，會(huì)跳轉(zhuǎn)到下面這個(gè)頁面：
這樣就實(shí)現(xiàn)了頁面跳轉(zhuǎn)现诀。下面就說說代碼里面的東西，對(duì)應(yīng)效果履肃。
細(xì)節(jié)說明
1）在Main.js代碼中仔沿，像import {createStackNavigator} from 'react-navigation';這行代碼是導(dǎo)入createStackNavigator，而這個(gè)是屬于react-navigation庫中的,這個(gè)庫中還封裝了標(biāo)簽導(dǎo)航（也就是qq尺棋、微信下面的那種）封锉，抽屜導(dǎo)航（qq右滑的那個(gè)效果），這些我都會(huì)在以后的博客中更新膘螟；
2）import Test01 from './Test01';import Test02 from './Test02';這個(gè)是包含需要跳轉(zhuǎn)的頁面成福，我這里有兩個(gè)頁面，一個(gè)是Test01荆残，另一個(gè)是Test02奴艾；
3）createStackNavigator函數(shù)，這個(gè)就是設(shè)置棧式導(dǎo)航路由的脊阴，函數(shù)原型：createStackNavigator(RouteConfigs, StackNavigatorConfig);這個(gè)函數(shù)有兩個(gè)參數(shù)握侧，第一個(gè)是路由配置，是一個(gè)對(duì)象嘿期，里面的鍵值對(duì)就是一個(gè)個(gè)路由品擎，就是需要跳轉(zhuǎn)的頁面，其中鍵的值是路由名稱备徐，也就是頁面的名稱萄传，這個(gè)名稱可以跟創(chuàng)建的類名不同（我只是習(xí)慣弄成一樣的），想想在js中的類蜜猾，其中鍵的值可以自己隨便刃懔狻；值的值是一個(gè)對(duì)象蹭睡，
對(duì)象里面第一個(gè)屬性是screen衍菱，這個(gè)的值必須與上面導(dǎo)入的值相同；
第二個(gè)參數(shù)是path肩豁，這個(gè)我一直沒用到過脊串；
第三個(gè)參數(shù)是navigationOptions，這個(gè)屬性主要是設(shè)置導(dǎo)航欄的清钥，比如說導(dǎo)航欄的背景顏色琼锋，返回按鈕等等，具體的參數(shù)官網(wǎng)都有介紹祟昭，可返回到上面點(diǎn)擊鏈接跳轉(zhuǎn)到官網(wǎng)進(jìn)行查看缕坎，我說幾個(gè)常見的屬性，一般導(dǎo)航欄的標(biāo)題需要設(shè)置篡悟，使用title谜叹，這個(gè)屬性接受一個(gè)字符串匾寝；header，使用這個(gè)屬性主要是當(dāng)我們不需要導(dǎo)航欄的時(shí)候叉谜，這個(gè)時(shí)候需要將其設(shè)置為null旗吁，形如：header:null踩萎；headerBackImage這個(gè)屬性是自定義返回按鈕的圖片停局，這個(gè)屬性在安卓與蘋果上默認(rèn)效果不同，一般都要自定義香府，這個(gè)屬性接受一個(gè)像<Image/>這樣的組件董栽，官方提供一個(gè)回調(diào)函數(shù)，只要最后返回值是像<View>這樣的就行企孩，回調(diào)函數(shù)參數(shù)是一個(gè)對(duì)象锭碳，常用的屬性是tintColor，這個(gè)屬性你用了就知道什么意思了勿璃，我不知道怎么描述擒抛，官方解釋的是：Color of the currently selected tab icon，反正我像下面設(shè)置以后就變成了淺藍(lán)色：<Image source={require('../res/left.png')} style={{width:30,height:30,tintColor:tintColor}} />补疑；headerBackTitle這個(gè)屬性是返回文本歧沪，接受一個(gè)字符串或者null，當(dāng)是null的時(shí)候沒有返回文本莲组；
4）createStackNavigator函數(shù)的第二個(gè)參數(shù)StackNavigatorConfig诊胞，這個(gè)我在使用中一般只使用initialRouteName這個(gè)屬性，這個(gè)屬性的意思就是默認(rèn)路由锹杈，也就是剛進(jìn)去的時(shí)候顯示的是哪一個(gè)頁面撵孤，一般不設(shè)置這個(gè)屬性的話，默認(rèn)是第一參數(shù)的第一個(gè)路由作為第一個(gè)頁面竭望，否則按照這兒設(shè)置的邪码；
5）把createStackNavigator函數(shù)設(shè)置完成以后，將這個(gè)函數(shù)的返回值導(dǎo)出咬清，使用module.exports這種方式導(dǎo)出和使用export default的方式導(dǎo)出都沒有問題闭专；
6）在需要跳轉(zhuǎn)的地方，書寫代碼this.props.navigation.navigate("這里填設(shè)置時(shí)寫的路由名稱枫振，也就是鍵的值")（就像Test01這個(gè)頁面里面按鈕觸發(fā)事件一樣）喻圃，而無需再一次導(dǎo)入createStackNavigator，在被設(shè)置到棧式導(dǎo)航里面的所有頁面粪滤，里面都有一個(gè)靜態(tài)的navigationOptions對(duì)象斧拍，跟設(shè)置createStackNavigator函數(shù)的第一個(gè)參數(shù)里面的navigationOptions是一樣的，也就是說杖小，你可以將這個(gè)參數(shù)寫到每一個(gè)頁面里面肆汹，也可以寫在配置路由的地方愚墓，在頁面中具體怎么寫，我把代碼寫到Test01.js里面昂勉，看下面浪册；
import React,{Component} from 'react';
import {Button} from 'react-native';
export default class Test01 extends Component{
? ? static navigationOptions = {
? ? ? ? title:'這是第一個(gè)頁面'
? ? }
? ? render(){
? ? ? ? return (
? ? ? ? ? ? <Button onPress={()=>this.props.navigation.navigate('Test02')} title={'跳轉(zhuǎn)到test02頁面'} />
? ? ? ? );
? ? }
}
一般我們使用棧式導(dǎo)航createStackNavigator主要是為了實(shí)現(xiàn)頁面跳轉(zhuǎn)，如果我們?cè)賹⒊Ｓ胣avigationOptions放到每一個(gè)頁面里面岗照，那么可以說createStackNavigator里面就只有配置路由名稱這個(gè)工作村象，但這個(gè)工作我們卻需要寫上面那么多對(duì)象，顯然是不好的攒至，官方也考慮到了厚者，配置路由的簡(jiǎn)寫形式：
createStackNavigator({
? ? Test01:Test01,
? ? Test02:Test02
},{
? ? initialRouteName:'Test01'
});
這樣就搞定了，是不是很簡(jiǎn)單迫吐，如果你想深入了解棧式導(dǎo)航库菲，那么需要閱讀react-navigation生命周期和react-native實(shí)現(xiàn)頁面跳轉(zhuǎn)createStackNavigator（精華篇）（以后更新），一般入門篇的知識(shí)就已經(jīng)能夠滿足我們大部分開發(fā)志膀。
