ReactNative环境搭建
作者：互联网
环境搭建
混合APP开发框架
其他：Html5+:使用Hbuilder打包
开发框架之间的区别
1.HTML5+和Ionic进行移动开发
要先做出来一个完整的网站，然后在网站的基础上，使用h5+或者ionic提供的打包技术，把网站打包成一个应用
开发网站期间，可以使用他们提供的UI组件，很快速的开发一个网站
使用ionic或H5+提供的打包技术，把网站打包成一个可以安装到手机可以运行的APP，为什么打包？为了安装到手机，为了调用底层的API
打包之后，就得到一个安卓应用，这个应用的内部运行的起始就是一个网站
好处：开发效率高
缺点：内部本质上是一个网站，效率和性能不太好
2.ReactNative或者Weex进行App开发
也需要开发出一个完整的项目，不是网站而是一个模板项目，不同于ionic和H5+，这里的项目不能运行于浏览器中，也不能运行于手机中，只是个半成品
使用RN或者Weex提供的组件来搭建项目
当项目开发完，在运行打包的时候需要使用RN或者Weex提供的打包命令行，把模板项目中的代码，逐行翻译成远程的Jasva或者OC代码，最终打包完毕，我们
得到的这个APP内部根本没有我们所认识的代码，全部被转换成远程代码，也就是说，这种防护四出书的是一个真正的原生的APP，只不过使用前端技术开发
出来的
好处：体验流畅，性能好
缺点：可用的组件较少
本地开发环境配置
安装最新版的java jdk
1.首先第一步，安装jdk1.8
2.配置环境变量配置path，java的环境变量
配置JAVA_HOME和CLASSPATH
i5ting_toc -f *.md 将md转换成html进行预览
cmd下执行java javac java -version进行验证
3.安装nodejs环境
node -v验证
4.安装c++环境
5.安装git环境
6.安装python环境
RN打包的内部需要
版本2.7
安装cmd python回车
7.安装安卓环境
① installer.exe 安卓sdk
② 将android-23.rar、android-24.rar、android-25.rar解压到platform文件夹下
③ 解压platform-tools放到根目录
④ 新建build-tools文件夹 复制解压build-tools_r23.0.1-windows.zip build-tools_r23.0.2-windows.zip build-tools_r23.0.3-windows.zip
并重命名23.0.1 23.0.2 23.0.3
⑤ 新建extras文件夹，在extras新建android文件夹，解压support_r23.2.1.zip android_m2repository_r40.zip，并解压
⑥ 配置环境变量
ANDROID_HOME sdk根目录
path配置 %ANDROID_HOME%\tools %ANDROID_HOME%\platform-tools两个变量
使用RN进行快速打包
不用使用cnpm，使用yarn或者npm进行下包
安装yarn和ReactNative命令行工具
npm install -g yarn react-native-cli
配置yarn后设置镜像
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
npm尽量使用5.0.4以上
npm i npm -g 更新npm
快速体验ReactNative开发过程
E:\reactProject\native>react-native init myrn01
注意python版本是2.7才可以，否则报错
Run instructions for iOS:
• cd myrn01 && react-native run-ios
- or -
• Open myrn01\ios\myrn01.xcodeproj in Xcode or run "xed -b ios"
• Hit the Run button
Run instructions for Android:
• Have an Android emulator running (quickest way to get started), or a device connected.
• cd myrn01 && react-native run-android
E:\reactProject\native\myrn01>adb devices
List of devices attached
E:\reactProject\native\myrn01>react-native run-android
快速体验Weex开发过程
① 安装weex-toolkit的脚手架来辅助开发和调试，首先安装稳定版的NodeJs和WeexCli工具
② 运行 npm install -g weex-toolkit安装Weex官方提供的工具到全局变量中
③ 运行 weex create project_name 初始化一个项目
④ 进入到项目根目录，打开cmd窗口，运行weex platform add android安装android模板，首次安装模板时，等待时间较长，建议fq安装模板
⑤ 打开android studio中的安卓模拟器，或者启动USB调试真机，运行 weex run android 打包部署weex项目
⑥ 部署完成，查看项目效果
命令记录
C:\Users\MSI-PC>npm install -g weex-toolkit
E:\vuejsProject\Weex>weex create weex01
不支持热编译像RN一样
以上是ReactNative环境搭建以及相关概念总结。
标签：npm,环境,weex,native,android,ReactNative,安装,打包,搭建 来源： https://blog.csdn.net/Burgess_Lee/article/details/102769385