Navigator已經(jīng)被React Native廢棄了。也許你可以在另外的一個(gè)依賴庫里react-native-deprecated-custom-components里找到。不過既然官方推薦的是react-navigation那我們就來看看這個(gè)東西到底有什么好的，值不值得用。

react-navigation包括下面三個(gè)Navigator：

• StackNavigator: 這個(gè)組件是用來代替之前的Navigator的。凡是維持一種“先進(jìn)后出”的棧式導(dǎo)航的話就可以用這個(gè)。
• TabNavigator：這個(gè)組件和iOS的`TabBarController。看起來是這樣的。
• DrawerNavigator：這個(gè)組件就是抽屜式的導(dǎo)航菜單。在React Native里只有Android才有：DrawerLayoutAndroid，在iOS里是沒有的。有了DrawerNavigator，兩個(gè)平臺都可以用了。

最簡單的用法：

import { StackNavigator } from "react-navigation"; export default NavHome = StackNavigator({Home: {screen: NavApp,},Message: {screen: MessageContainer,}, })

實(shí)現(xiàn)頁面間的跳轉(zhuǎn)：

StackNavigator(RouteConfigs, StackNavigatorConfig)我們需要配置navigationOptions
//App.js 頁面 <Button onPress={this.props.navigation.navigate('Message')} title={'To message'} />//MessageContainer.js <Button onPress={this.props.navigation.goBack()} title={'Go Back'} /> Home: {screen: App,navigationOptions: ({navigation}) => ({title: 'Home',headerLeft: (<Button onPress={() => navigation.navigate('DrawerToggle')} title={'User'} />),headerRight: (<Button onPress={() => navigation.navigate('Message')} title={'Message'} />), }) },

?

轉(zhuǎn)載于:https://www.cnblogs.com/cosyer/p/8426899.html

總結(jié)

以上是生活随笔為你收集整理的react-native填坑--react-navigation的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。