React Native — 导航组件

初始化 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开发期间的问题记录
另外有任何疑问可以私信我，一起探讨