React Native — 导航组件

作者 : 开心源码 本文共927个字,预计阅读时间需要3分钟 发布时间: 2022-05-12 共70人阅读

初始化 RN 项目


首先在RN官方文档搭建好环境和少量必需的软件

react-native init xx(你自己的项目命名)

终端跑一下,需要在项目目录下执行

react-native run-ios

跑的模拟器,看到这个界面后可以往后下一步了


要打开热加载的话,模拟器内 command + D ,Enable Hot Reloading

react-navigation 实战

代码片段就不贴了,这是Demo,做了导航栏,TabBar。可以先运行起来看下效果,而后自己再撸一遍代码,新开项目需要跳转到工程的目录下增加下依赖包:

npm i react-navigation --savenpm i react-native-vector-icons --save

增加依赖完成后,我们还需要把依赖包增加到工程中

react-native link

项目编辑工具使用 WebStorm,直接下载就行
破解: 注册时,在打开的License Activation窗口中选择License server,在输入框输入下面的网址:http://idea.wrbugtest.tk/ 或者者 https://idea.qmanga.com/

项目包括以下内容

StackNavigator

相似于普通的Navigator,屏幕上方导航栏

  • 配置navigationOptions的几种方式
  • 静态配置navigationOptions与动态配置 navigationOptions
  • setParams 用,导航器(header)与页面通信

TabNavigator

相当于iOS里面的 TabBarController,屏幕下方的标签栏

  • TabBarComponent 自己设置或者动态修改TabBar

少量语法问题

const {navigation} = this.props;const {state,setParams} = navigation;const {params} = state;

这种语法一开始看会有点难解,这是es6 的解构赋值,可以了解为 const params = this.props.navigation.state,具体看这里

还有就是 Props属性和 State状态需要理解一下,具体可以上 RN 官方文档查阅


RN开发期间的问题记录
另外有任何疑问可以私信我,一起探讨

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » React Native — 导航组件

发表回复