react-native實現頁面跳轉createStackNavigator（入門篇）
此篇教程會持續更新。。。
ofollow,noindex">官方文件createStackNavigator
除錯環境
為了能夠讓閱讀者容易上手，我先將簡單的程式碼附上，閱讀者拷貝到自己的程式碼看看效果，然後再看我的教程一點點深入瞭解createStackNavigator，達到靈活運用。
演示步驟
1）首先使用終端 切換到專案所在目錄 下，輸入：npm install --save react-navigation，等待安裝成功，一般學習到這裡自己的電腦上肯定已經安裝好了npm，這個在安裝node的時候會預設安裝；
2）下面這個是配置路由的頁面，你將這個頁面放在單獨的元件中，這個元件不能含有其他元件，我取名叫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的標題'
})
},
Test02:{
screen:Test02,
navigationOptions:({navigation})=>({
title:'這是Test02的標題'
})
}
},{
initialRouteName:'Test01'
});
module.exports = App;
記住匯入的那兩個檔案必須與這個檔案在同一目錄，如果不在需要自己修改上面的路徑（假如，你還不知道怎麼匯入的話，一般學到這裡都瞭解了，你就按照我的要求放在同一個資料夾中，同時希望你能去看相關的教程來提高自己）；
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={'跳轉到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>
);
}
}
這樣就完成工作了，接下來看看效果：
剛進來的頁面
當我點選按鈕“跳轉到test02頁面”以後，會跳轉到下面這個頁面：
跳轉以後的頁面
這樣就實現了頁面跳轉。下面就說說程式碼裡面的東西，對應效果。
細節說明
1）在Main.js程式碼中，像import {createStackNavigator} from 'react-navigation';這行程式碼是匯入createStackNavigator，而這個是屬於react-navigation庫中的,這個庫中還封裝了標籤導航（也就是qq、微信下面的那種），抽屜導航（qq右滑的那個效果），這些我都會在以後的部落格中更新；
2）import Test01 from './Test01';import Test02 from './Test02';這個是包含需要跳轉的頁面，我這裡有兩個頁面，一個是Test01，另一個是Test02；
3）createStackNavigator函式，這個就是設定棧式導航路由的，函式原型：createStackNavigator(RouteConfigs, StackNavigatorConfig);這個函式有兩個引數，第一個是路由配置，是一個物件，裡面的鍵值對就是一個個路由，就是需要跳轉的頁面，其中鍵的值是路由名稱，也就是頁面的名稱，這個名稱可以跟建立的類名不同（我只是習慣弄成一樣的），想想在js中的類，其中鍵的值可以自己隨便取；值的值是一個物件，
物件裡面第一個屬性是screen，這個的值必須與上面匯入的值相同；
第二個引數是path，這個我一直沒用到過；
第三個引數是navigationOptions，這個屬性主要是設定導航欄的，比如說導航欄的背景顏色，返回按鈕等等，具體的引數官網都有介紹，可返回到上面點選連結跳轉到官網進行檢視，我說幾個常見的屬性，一般導航欄的標題需要設定，使用title，這個屬性接受一個字串；header，使用這個屬性主要是當我們不需要導航欄的時候，這個時候需要將其設定為null，形如：header:null；headerBackImage這個屬性是自定義返回按鈕的圖片，這個屬性在安卓與蘋果上預設效果不同，一般都要自定義，這個屬性接受一個像<Image/>這樣的元件，官方提供一個回撥函式，只要最後返回值是像<View>這樣的就行，回撥函式引數是一個物件，常用的屬性是tintColor，這個屬性你用了就知道什麼意思了，我不知道怎麼描述，官方解釋的是：Color of the currently selected tab icon，反正我像下面設定以後就變成了淺藍色：<Image source={require('../res/left.png')} style={{width:30,height:30,tintColor:tintColor}} />；headerBackTitle這個屬性是返回文字，接受一個字串或者null，當是null的時候沒有返回文字；
4）createStackNavigator函式的第二個引數StackNavigatorConfig，這個我在使用中一般只使用initialRouteName這個屬性，這個屬性的意思就是預設路由，也就是剛進去的時候顯示的是哪一個頁面，一般不設定這個屬性的話，預設是第一引數的第一個路由作為第一個頁面，否則按照這兒設定的；
5）把createStackNavigator函式設定完成以後，將這個函式的返回值匯出，使用module.exports這種方式匯出和使用export default的方式匯出都沒有問題；
6）在需要跳轉的地方，書寫程式碼this.props.navigation.navigate("這裡填設定時寫的路由名稱，也就是鍵的值")（就像Test01這個頁面裡面按鈕觸發事件一樣），而無需再一次匯入createStackNavigator，在被設定到棧式導航裡面的所有頁面，裡面都有一個靜態的navigationOptions物件，跟設定createStackNavigator函式的第一個引數裡面的navigationOptions是一樣的，也就是說，你可以將這個引數寫到每一個頁面裡面，也可以寫在配置路由的地方，在頁面中具體怎麼寫，我把程式碼寫到Test01.js裡面，看下面；
import React,{Component} from 'react';
import {Button} from 'react-native';
export default class Test01 extends Component{
static navigationOptions = {
title:'這是第一個頁面'
}
render(){
return (
<Button onPress={()=>this.props.navigation.navigate('Test02')} title={'跳轉到test02頁面'} />
);
}
}
一般我們使用棧式導航createStackNavigator主要是為了實現頁面跳轉，如果我們再將常用navigationOptions放到每一個頁面裡面，那麼可以說createStackNavigator裡面就只有配置路由名稱這個工作，但這個工作我們卻需要寫上面那麼多物件，顯然是不好的，官方也考慮到了，配置路由的簡寫形式：
createStackNavigator({
Test01:Test01,
Test02:Test02
},{
initialRouteName:'Test01'
});
這樣就搞定了，是不是很簡單，如果你想深入瞭解棧式導航，那麼需要閱讀 react-navigation生命週期 和react-native實現頁面跳轉createStackNavigator（精華篇）（以後更新），一般入門篇的知識就已經能夠滿足我們大部分開發。