react-native填坑--react-navigation

Posted 2020-10-23 cosyer的博客

Navigator已经被React Native废弃了。也许你可以在另外的一个依赖库里react-native-deprecated-custom-components里找到。不过既然官方推荐的是react-navigation那我们就来看看这个东西到底有什么好的，值不值得用。

react-navigation包括下面三个Navigator：

• StackNavigator: 这个组件是用来代替之前的Navigator的。凡是维持一种“先进后出”的栈式导航的话就可以用这个。
• TabNavigator：这个组件和ios的`TabBarController。看起来是这样的。
• DrawerNavigator：这个组件就是抽屉式的导航菜单。在React Native里只有android才有：DrawerLayoutAndroid，在iOS里是没有的。有了DrawerNavigator，两个平台都可以用了。

最简单的用法：

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

实现页面间的跳转：

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‘} />),
    })
},