码迷,mamicode.com
首页 > 其他好文 > 详细

react-native填坑--react-navigation

时间:2018-02-07 16:47:44      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:cat   组件   抽屉   get   navig   lan   ted   app.js   gate   

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

标签:cat   组件   抽屉   get   navig   lan   ted   app.js   gate   

原文地址:https://www.cnblogs.com/cosyer/p/8426899.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!