react-native填坑--react-navigation

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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

以上是 react-native填坑--react-navigation 的全部内容， 来源链接： utcz.com/z/382818.html

回到顶部