学习使用ReactNative
2017-11-29 本文已影响51人
每天多一点
资料汇总
安装和启动
按照 http://reactnative.cn/docs/0.50/getting-started.html#content 就可以了
我使用的是Webstorm, 通过ide可以构建RN工程. 工程生成后会在命令行的console下提示启动方式.
Webstorm提示的方法会引导去一个临时目录下启动. 其实我们可以在你工程路径下启动就可以了.
注意 :
- Webstorm使用的是react-nativ-cli来新建项目. 目前官方还推荐的方式是采用新的方式进行create-react-native-app 来新建项目, 但是这个方式简历的项目其实是一个纯RN项目, 不含有Native代码. 需要使用 npm run eject 命令添加Native代码.
- 因为yarn在React Native中被官方所使用和推荐, 所以为了后续的维护和升级, 建议安装yarn(不要用npm), 同时使用yarn的方式去代替可能用到npm的地方，例如 yarn global add <第三方包名> 。
向工程添加依赖的通用方法
一般分成两个步骤
- 在RN项目的package.json中添加依赖, 使用npm或者是yarn就可以自动下载最新的包.
- 在RN项目的android/ios工程中, 添加库文件
以上两个步骤可以手动完成, 也可以用命令完成.
- 使用命令
yarn add <某个库>
react-native link
可以参考这里
- (或者)使用手动
在package.json中添加依赖
"dependencies": {
"react": "16.0.0",
"react-native": "0.50.4",
"react-native-tab-navigator": "^0.3.4",
"react-native-vector-icons": "^4.4.2"
},
然后执行 npm install
将库文件拖入iOS工程, android使用推荐的gradle集成方式
应用打包
- Android: http://reactnative.cn/docs/0.50/signed-apk-android.html#content
- iOS: 正常打包
项目模板和工程工具
-
一般工程结构
[图片上传失败...(image-7b4ff6-1515738411368)] -
常用开发工具
[图片上传失败...(image-f90cfa-1515738411368)] -
React Native Seed
根据需要下载到代码包后解压缩, 执行npm install安装所需要的模块后 -
ignite
一个有情怀的命令行工具, 方便的添加项目依赖, 默认构建包含了很多优秀的实践
各种方案推荐
-
基础UI库
https://github.com/react-native-training/react-native-elements -
Tabbar
https://github.com/happypancake/react-native-tab-navigator -
启动页
使用原生.
也可以参考https://www.vanadis.cn/2016/06/30/react-native-splash-screen/
关于布局
http://reactnative.cn/docs/0.50/layout-with-flexbox.html
