新鮮事簡單報
react-navigation是react-native官方推薦使用的導航庫图毕,簡單易上手,功能還很強。
安裝
使用npm安裝
npm install --save react-navigation
使用yarn安裝
yarn add react-navigation
喜歡誰就選誰。
跳轉方式
navigation默認給了三種跳轉方式
StackNavigator,TabNavigator,DrawerNavigator都是人如其名驴娃,效果的話可以想象,如果實在想象不出來那就接著往下看
恭喜xxx總喜提新頁面
時間緊任務重直奔主題拒絕前戲循集,只需實用shan分鐘唇敞,你就可以在各個頁面中遨游。
首先看StackNavigator的效果
const HomeScreen = ({navigation})=>(
<View>
<Text>
Hello to Chat
</Text>
<Button title={'Chat to Lucy'} onPress={()=>{navigation.navigate('Chat',{user:'Lucy'})}} />
</View>
);
const ChatScreen =({navigation})=>(
<View>
<Text>
Chat with {navigation.state.params.user }
</Text>
</View>
);
const RootStack = StackNavigator({
Home:{
screen:HomeScreen,
navigationOptions:{
headerTitle:'Home'
}
},
Chat:{
screen:ChatScreen,
navigationOption:{
headerTitle:'Chat'
}
}
});
官網(wǎng)的例子這里就不多說咒彤,自己試驗就可以疆柔,其實我在這里最想說的是一個思想,就是導航就是組件镶柱,這樣你就可以很好的理解導航之間的嵌套旷档,做到無所欲為。
看下導航嵌套的例子,在之前的代碼下面新加一個頁面和TabNavigator導航
const SetUp = () =>(
<Text>
Set Up!
</Text>
)
const RootTab = TabNavigator({
Main:{
screen:RootStack
},
SetUp:{
screen:SetUp
}
});
導航就是組件歇拆,所以這里可以看到我們把之前的Stack類型的導航嵌套在Tab導航中這樣你在就可通過切換tab標簽切換其他頁面鞋屈,也可以在Main頁面下跳轉范咨,又不改變標簽,大概可以抽象成下面這種圖片
----------------------------------------------(圖片加載)---------------------------------------------
好了謝謝你這么認真的看完我如此認真的耍流氓~~~