這篇文章主要是針對(duì)React Navigation 的實(shí)踐講解岗宣，因?yàn)楸救嗽诔鯇W(xué)React-native 的時(shí)候弟蚀，基本的組件脚曾，布局這些都是最基礎(chǔ)的點(diǎn)谋国，可以在以后慢慢練習(xí)掌握就可以了，所以我從交互和網(wǎng)絡(luò)開(kāi)始著手練習(xí)react-native号阿。
一開(kāi)始搭建環(huán)境我就不說(shuō)了并鸵，可以參照react-native 中文網(wǎng) 進(jìn)行環(huán)境搭建鸳粉。但有點(diǎn)坑的是扔涧，react-native 中文網(wǎng)好像不知道從什么時(shí)候停止更新了，如果你從頭到尾都參照這個(gè)網(wǎng)站去學(xué)習(xí)可能會(huì)遇到很多坑届谈，要知道爬坑可是很痛苦的一件事枯夜。所以我建議還是去官網(wǎng)對(duì)照學(xué)習(xí)。雖然英文看上去有一些不習(xí)慣艰山，但慢慢的就好了湖雹。
本人demo中的版本是最新版3.9.1，react-native 版本也為最新版曙搬。
首先我說(shuō)一下React Navigation@3.x之后摔吏，最低需要react-native@0.54.x，如果你的react-native版本過(guò)低纵装，node_modules就會(huì)一直紅屏報(bào)錯(cuò)征讲，顯示需要安裝各種依賴包，當(dāng)你裝完一個(gè)有一個(gè)的依賴包還是報(bào)錯(cuò)的話橡娄，不妨查看一下本地react-native 和React Navigation 的版本诗箍，還有你的node版本最好在10.0以上。
node -v
react-native -v
接下來(lái)創(chuàng)建一個(gè)項(xiàng)目
react-native init MyReact
安裝依賴：
yarn add react-navigation
yarn add react-native-gesture-handler
react-native link react-native-gesture-handle
跑起來(lái)：
npm start
接下來(lái)打開(kāi)項(xiàng)目挽唉，從app.js開(kāi)始著手滤祖，寫兩個(gè)Component筷狼，用于跳轉(zhuǎn)。
class HomeScreen extends React.Component{
render(){
<View style = {{ flex : 1, justifyContent : 'center' , alignItems: 'center'}}>
<Text> HomeScreen </Text>
<Button onPress = {() => this.props.navigation.navigate('Detail')}
title = 'Go to Detail'/>
</View>
}
}
class DetailScreen extends React.Component{
render(){
<View style = {{flex: 1, alignItems: 'center' , justifyContent: 'center'}}>
<Button
title = 'go back'
onPress = { () => this.props.navigation.goBack()}
/>
</View>
}
創(chuàng)建一個(gè)導(dǎo)航器：
const AppNavigator = createStackNavigator(
{
Home: {screen: HomeScreen},
Detail: {screen: DetailScreen}
},
放入一個(gè)APP容器
export default createAppContainer(AppNavigator);
運(yùn)行代碼：
這樣匠童，就能成功的跳轉(zhuǎn)利用React Navigation 進(jìn)行跳轉(zhuǎn)埂材，當(dāng)然這只最簡(jiǎn)單的用法，Demo 里面會(huì)涉及到一些傳參俏让， 自定義導(dǎo)航按鈕和樣式楞遏，以及關(guān)聯(lián)屬性等。
demo地址 希望對(duì)您有所幫助首昔。
