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 --save
npm 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开发期间的问题记录
另外有任何问题可以私信我，一起讨论