react-native填坑--react-navigation

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

转载于:https://www.cnblogs.com/cosyer/p/8426899.html

react-native填坑--react-navigation相关推荐

React Native填坑之旅--动画篇
React Native填坑之旅--Button篇 React Native填坑之旅--动画 React Native填坑之旅--HTTP请求篇动画是提高用户体验不可缺少的一个元素.恰如其分的动画可 ...
React Native填坑之旅 -- 回归小插曲
回归RN,非常开心啊! 在React Native 0.49.5上开发,直接遇到一个ios模拟器的问题.这个问题很简单就是Bundle URL not present. 在网上找了很多的解决方法,都不 ...
Web前端：React Native Web与React — 比较指南
React 是Facebook开发的用于构建交互式用户界面的JavaScript库.React 在 Apache 许可下作为开源软件提供,可用于个人和商业网站.客户端 Web 应用程序和服务器应用 ...
超详细 React Native 入坑使用指南，我在元宇宙等你
前言大家好,我是虚竹,今天给大家分享一下我是如何快速通关打怪搭建 React Native 跨端开发环境,并使用大家非常熟悉的开发工具 VSCode 来编写丝滑般的代码.编写丝滑般代码会再下一篇输出 ...
【React Native进阶】React Native Gesture Handler的使用
背景说到React Navtive的性能优化,首先要了解React Native的运行机制.React Native程序主要运行在三个并行的线程上: JS Thread:我们写的JS代码逻辑都是在这 ...
【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件解说(13)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50599951 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...
【React Native开发】React Native控件之RefreshControl组件具体解释(21)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50672747 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...
【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50589570 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...
如何在React Native中使用React JS Hooks？
In my articles, I'm going to be using either expo or snack online IDE and android emulator. 在我的文章中,我 ...
React Native－6.React Native Text组件，多组件封装实战之凤凰资讯页面
现来个图:没图说个xx 先来分析怎么做一个导航栏一个列表一个摘要列表大体可以分为上中下三个模块,那么我们从上到下一次封装. 我们来搞出些事情创建.js文件,一个组件一个.js文件我们通过命 ...

react-native填坑--react-navigation

react-native填坑--react-navigation相关推荐

最新文章

热门文章