一、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版本