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环境搭建以及相关概念总结。