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 官方文档查阅


ReactNative-LiveTemplate 代码智能提示插件

首先大家可以把该项目下载或者如下命令clone下来:

git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
file -> import settings -> ReactNative.jar

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我乃二郎神的走狗哮天犬,成日跟着二郎神降妖除魔,耍耍帅。我还是一只狗,一只明明到了化形期却始终化不了型的狗。 我照...
    溯酥洄阅读 590评论 0 3
  • Do something everyday that you don't want to do, this is ...
    风中白桦阅读 318评论 0 0
  • 还有两天,我们即将告别2017,迎来2018,17级进修班的同学们在今天用他们自己热情与努力向我们展现了一场丰富的...
    小朱老师zsl阅读 1,133评论 2 3
  • 01克服写作障碍,启程 在逸飞的邀请下,加入了写作爱好交流群。群的名字很简单,一目了然;群内的成员也不多,十来个。...
    留住小时光阅读 484评论 1 3