学习使用ReactNative

资料汇总

• awesome列表
• 中文站
  注意在github上, 如果想搜索RN的相关项目, 请使用react-native作为关键词
• 中文第三方库整理

安装和启动

按照 http://reactnative.cn/docs/0.50/getting-started.html#content 就可以了
我使用的是Webstorm, 通过ide可以构建RN工程. 工程生成后会在命令行的console下提示启动方式.
Webstorm提示的方法会引导去一个临时目录下启动. 其实我们可以在你工程路径下启动就可以了.

注意 :

1. Webstorm使用的是react-nativ-cli来新建项目. 目前官方还推荐的方式是采用新的方式进行create-react-native-app 来新建项目, 但是这个方式简历的项目其实是一个纯RN项目, 不含有Native代码. 需要使用 npm run eject 命令添加Native代码.
2. 因为yarn在React Native中被官方所使用和推荐, 所以为了后续的维护和升级, 建议安装yarn(不要用npm), 同时使用yarn的方式去代替可能用到npm的地方，例如 yarn global add <第三方包名> 。

向工程添加依赖的通用方法

一般分成两个步骤

1. 在RN项目的package.json中添加依赖, 使用npm或者是yarn就可以自动下载最新的包.
2. 在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

• 图标和字体
  https://github.com/oblador/react-native-vector-icons

• 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

Q&A

• “RCTBundleURLProvider.h” file not found - AppDelegate.m