React Native开发环境配置

一、React Native简介

• 由Facebook推出，基于JavaScript框架和React库来提高多平台开发效率的一门语言。其核心思想是：Learn once, write anywhere.

• 目前react native在iOS上仅支持ios8.0以上，Android仅支持Android4.1以上。

• 性能：内存和cpu介于原生和混合开发（Hybird）之间。

• 语言：React、JSX语法。

二、环境搭建和应用运行

• 1、windows搭建Android开发环境

下载安装Node.js
安装React Native命令行工具:npm install -g react-native-cli
安装Java JDK和 Android SDK
安装Android Studio（辅助原生开发部分）
安装WebStorm（JavaScript）

• 2、Mac搭建Android和ios环境

安装node.js： brew install node
安装watchman: brew install watchman
安装React Native命令行工具:npm install -g react-native-cli
安装ios开发工具Xcode和Xcode命令行工具
安装WebStorm（JavaScript）

• 3、设置国内镜像服务器

查看镜像源
npmconfig get registry

更换为taobao源
npmconfig set registry https://registry.npm.taobao.org --global
npmconfig set disturl https://npm.taobao.org/dist --global

更换为官方镜像源
npmconfig set registry https://registry.npmjs.org/

• 4、创建react-native工程：

react-native init AwesomeProject

• 5、安装第三方组件或依赖库

npm install命令

• 6、调试

调试：手机摇一摇/menu键，Chrom浏览器里打断点/看日志

• 7、运行原理

RN会把应用的JS代码（包括依赖的framework）编译成一个js文件（一般命名为index.android.bundle或index.ios.js），
RN的整体框架目标就是为了解释运行这个js脚本文件，如果是js扩展的API，则直接通过bridge桥接文件调用native方法；
如果是UI界面，则映射到virtual DOM这个虚拟的JS数据结构中，通过bridge传递到native，然后根据数据属性设置各个
对应的真实native的View；

• 8、运行命令

开启react nativ的包管理器：npm start
android: react-native run-android
ios: react-native run-ios

• 9、手动生成index.js

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.bundle --assets-dest android/app/src/main/assets/

• 10、调起开发者菜单：

adb shell input keyevent 82
停止node进程taskkill /f /t /im node.exe
打包apk：gradlew assembleRelease

三、 注意事项

版本选定之后就不要修改
Node.js版本
react-native-cli版本和React Native版本