文档版本0.0.2
说明: 本文档用于指导前端React Native的开发,如需开发其他其他框架应用,不适用本文档
- ReactNative 的基本概念ReactNative文档
- es6 开发基本知识 es6 基本文档
- Node 环境(Node >=5.0.0,Yarn)下载地址
- Android Studio环境Android Studio
- Xcode 环境(Mac适用)
通过 npm 安装 React Native 脚手架命令行工具
npm install -g yarn react-native-cli
由于官方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模拟器,或者安卓模拟器上,并且会打开命令行运行构建服务,
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
- container 目录下有一个业务建一个子文件夹, 文件夹以驼峰命名, 其他文件也以驼峰命名
- components 目录下也分别建子文件夹, 文件夹以驼峰命名,其他文件也以驼峰命名
如果我们想要开发或者更新Template该怎么办?
1.通过Template构建测试项目,在这个项目中开发您的代码
2.开发完之后,将测试项目所有的依赖正确添加到Template项目的dependencies.json和devDependencies.json中,如果需要增加测试页面,请将相关文件也拷贝到Template项目中,
3.更新package.json中的版本号,提交代码
4.命令行执行
npm publish
5.enjoy it
- 扫一扫
使用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>
- 图片缓存
以下步骤在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
dependencies {
compile 'com.facebook.fresco:animated-base-support:0.14.1'
compile 'com.facebook.fresco:animated-gif:0.14.1'
}
之后重新运行 react-native run-android