其他分享
首页 > 其他分享> > ReactNative环境搭建

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