ReactNative前端开发者

ReactNative前端开发者

文档版本0.0.2

Author: Necfol

说明: 本文档用于指导前端React Native的开发，如需开发其余其余框架应用，不适用本文档

前期准备

1. ReactNative 的基本概念ReactNative文档
2. es6 开发基本知识 es6 基本文档
3. Node 环境(Node >=5.0.0，Yarn)下载地址
4. Android Studio环境Android Studio
5. Xcode 环境（Mac适用）

一、搭建脚手架

1.一、安装脚手架工具

经过 npm 安装 React Native 脚手架命令行工具

npm install -g yarn react-native-cli 

1.二、初始化脚手架

因为官方RN0.45版本有问题，推荐使用0.44.3稳定版本

$ react-native init ${your_project} --template micrn --version 0.44.3 

若是须要特定版本则：

$ react-native init ${your_project} --template micrn --version ${version}

若是须要最新版本则：

$ react-native init ${your_project} --template micrn --version

例如: react-native init test --template micrn --version 0.44.3

命令会在当前的文件夹下生成一个文件夹，这个文件夹就是咱们的项目文件夹

二、 运行项目

1.进入上一步建立的文件夹，运行命令(初次运行此项目时须要输入)

node script/addDev.js 

命令运行后，会去下载相关的dev依赖，而且替换包名称。这是因为React Native官方提供的构建模板生成工具不支持devDependencies，因此自定义devDependencies.json文件，项目生成以后，经过脚本把devDependencies.json中的依赖依次安装而且添加到package.json中；官方提供的构建模板生成工具也不支持自动在template构建的项目中替换应用名称，这个脚本也达到了自动替换应用名称的目的。
2.而后启动项目

ios(Mac环境): react-native run-ios android: react-native run-android 

安卓在运行项目以前，须要先打开Android Studio运行安卓模拟器！！!即AVD Manager. 安卓第一次运行的时候，命令行下载依赖可能比较慢，能够参考安装，经过Android Studio进行快速安装依赖。 项目启动在ios模拟器，或者安卓模拟器上，而且会打开命令行运行构建服务， ⚠️ 不能把进程杀掉！ 能够经过chrome 安装调试工具，或者安装react-native-debugger，再或者React Developer Tools。

三、项目基本结构

3.一、目录说明

my-project
├── __tests__
├── android //安卓工程项目 ├── ios //ios工程项目 ├── script //脚本文件存放处 ├── src //项目源代码，开发人员编写的源代码都在这个目录下 │ └── action //redux中放置action的文件夹 │ │ └── home.js //home的action │ │ └── type //存放action type的文件夹 │ └── components //页面级别的公用组件, 例如在某个项目里共同使用的用户信息展现, 某些共用的复杂弹窗等等 │ │ └── QRScan.js //二维码/条形码扫描 │ └── container //业务模块文件夹, 按照业务逻辑区分的业务模块文件夹 │ │ └── Home.js //首页 │ └── reducer //redux中放置reducer的文件夹 │ │ └── index.js //combine全部reducer │ │ └── nav.js //navigation的reducer │ │ └── home.js //home页面的reducer │ └── app.js //入口 │ └── routerConfig.js //路由 │ └── configStore.js //redux中间件添加，调试工具配置 │ └── root.js //navigation根页面 ├── .buckconfig ├── .flowconfig ├── .gitattributes ├── .npmignore ├── jsconfig.json ├── app.json ├── .babelrc //babel配置 ├── .gitignore ├── README.md ├── index.android.js //android应用入口 ├── index.ios.js //ios应用入口 ├── package.json ├── yarn.lock 

3.二、目录规范

1. container 目录下有一个业务建一个子文件夹, 文件夹以驼峰命名, 其余文件也以驼峰命名
2. components 目录下也分别建子文件夹, 文件夹以驼峰命名,其余文件也以驼峰命名

四、我要开发Template

若是咱们想要开发或者更新Template该怎么办？
1.经过Template构建测试项目，在这个项目中开发您的代码
2.开发完以后，将测试项目全部的依赖正确添加到Template项目的dependencies.json和devDependencies.json中，若是须要增长测试页面，请将相关文件也拷贝到Template项目中， ⚠️ 必定要确认无误方可提交，而且发布。
3.更新package.json中的版本号，提交代码
4.命令行执行

npm publish 

5.enjoy it

五、组件使用提示

1. 扫一扫
   使用iOS 10或者更高版本时，须要在项目info.plist中增长相机使用权限，�该文件在'your_project/ios/your_project/Info.plist'，请增长如下代码:

<key>NSCameraUsageDescription</key> <string>Your message to user when the camera is accessed for the first time</string> <!-- Include this only if you are planning to use the camera roll --> <key>NSPhotoLibraryUsageDescription</key> <string>Your message to user when the photo library is accessed for the first time</string> <!-- Include this only if you are planning to use the microphone for video recording --> <key>NSMicrophoneUsageDescription</key> <string>Your message to user when the microsphone is accessed for the first time</string> 

1. 图片缓存

如下步骤在0.1.6及以上版本已经集成到addDev.js中，只须要在下载完跑脚本便可，可忽略

第一次使用图片缓存时须要运行

RNFB_ANDROID_PERMISSIONS=true react-native link react-native-fetch-blob 

而且在项目android/app/src/AndroidManifest.xml中添加

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 

以后使用图片缓存便可按照文档来react-native-cached-image

⚠️ 若是ios加载图片必须是https
⚠️ 对于安卓加载gif图片，须要在项目的/android/app/build.gradle的dependencies中添加

dependencies { compile 'com.facebook.fresco:animated-base-support:0.14.1' compile 'com.facebook.fresco:animated-gif:0.14.1' } 

以后从新运行 react-native run-android