React Native开发环境配置

2019-08-27  本文已影响0人  Huangrong_000

一、React Native简介

二、环境搭建和应用运行

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

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

查看镜像源
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/

react-native init AwesomeProject

npm install命令

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

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

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

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/

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

三、 注意事项

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

上一篇 下一篇

猜你喜欢

热点阅读