来自 金沙js77888 2020-04-21 13:56 的文章
当前位置: 金沙js77888 > 金沙js77888 > 正文

新开项目需要跳转到工程的目录下添加下依赖包

初始化 RN 项目

首先在RN官方文档搭建好环境和一些必须的软件,然后

react-native init xx

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

react-native run-ios

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

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

代码片段就不贴了,这是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 使用,导航器与页面通信

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

本文由金沙js77888发布于金沙js77888,转载请注明出处:新开项目需要跳转到工程的目录下添加下依赖包

关键词: 组件 React Native