ReactNavigation是react社區(qū)比較流行的導(dǎo)航庫，完全用js編寫拔妥，github地址：
https://github.com/react-navigation/react-navigation
他還有個官方網(wǎng)站：
https://reactnavigation.org/docs/en/hello-react-navigation.html
像我這種初學者當然要看看官網(wǎng)文檔了，按照文檔，先下載依賴庫：
yarn add react-navigation
yarn add react-native-gesture-handler
react-native link react-native-gesture-handler
當然，如果想用npm也行，命令都差不多：
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link react-native-gesture-handler
然后扒下了如下代碼肢执，隨便命名為navigation.js放到App.js的同級目錄下：
import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen
}
});
export default createAppContainer(AppNavigator);
這里讓我比較困惑的是最后一句，export類我聽過译红，按他這么寫是個什么玩意预茄？查閱了文檔發(fā)現(xiàn)export不只能導(dǎo)出類，還能導(dǎo)出函數(shù)侦厚、值耻陕、變量等拙徽，同時，一個文件可以有若干個export诗宣，但是export default只能有一個膘怕，后者相當于導(dǎo)出了一個默認變量，沒有名字召庞，你import的時候讓他叫什么他就叫什么岛心，而這里的寫法，其實導(dǎo)出的是一個值篮灼，這個值是它以自己定義的對象AppNavigator為入?yún)⒄{(diào)用react-navigation的函數(shù)createAppContainer后得到的返回值忘古。這個函數(shù)返回的就是一個組件，也就是我們的navigator穿稳。
所以在App.js里存皂，我們可以這么寫：
import React from "react"
import Container from "./navigation.js"
export default class App extends React.Component{
render(){
return <Container/>
}
}
這里需要注意的是，import命令如果目標js在同級目錄逢艘，不能省略"./"旦袋，否則會提示找不到模塊。
按這樣寫完它改，運行后就看到了一個包含導(dǎo)航欄的空頁面疤孕。
但是只有一個頁面好像沒什么用，起碼得能完成跳轉(zhuǎn)啊央拖，于是我又寫了一個頁面：
class MyScreen extends React.Component{
render(){
return(
<View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
<Text>My Screen</Text>
</View>
)
}
}
這個頁面的注冊還是放在createStackNavigator里：
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen
},
My: {
screen: MyScreen
}
});
然后祭阀，在HomeScreen里加入一個按鈕讓他的點擊事件觸發(fā)跳轉(zhuǎn)：
<Button title="Goto MyScreen" onPress={() => this.props.navigation.navigate("My")}/>
運行后發(fā)現(xiàn)點擊按鈕可以完成頁面的跳轉(zhuǎn)，新頁面帶有一個返回按鈕鲜戒，這就實現(xiàn)了跟web瀏覽器一樣的功能专控，這種導(dǎo)航內(nèi)部維護了一個存放頁面的棧，后退功能就是通過這個來實現(xiàn)的遏餐。
通過遍歷navigation對象的屬性我們可以看到除了navigation方法之外還有push伦腐、pop、goBack等方法以及state等屬性失都，pop方法跟goBack都是用來返回上一個頁面的柏蘑，push和navigate的區(qū)別是如果你調(diào)用navigate傳入的key對應(yīng)的頁面已經(jīng)在最上層了，他就不會開啟新的頁面粹庞，push則不同咳焚。
navigate和push方法都可以接受傳參，把參數(shù)放入json里作為第二個參數(shù)就可以傳遞給打開的頁面庞溜，在打開的頁面里用navigation.getParam(參數(shù)名)就可以獲取到參數(shù)革半。除此之外，還可以通過navigation.state.params得到參數(shù)，如果沒有任何傳參督惰，這個屬性會是null不傅。
以上是stackNavigator部分的使用，tab和模式對話框部分另起一篇文章寫赏胚。
