自从选择了react-native用来开发移动app,就感觉自己在折腾的路上越走越远,一开始在weex和react-native之间纠结,一来weex可以使用vue的语法,因为之前大部分项目都是小程序或者基于vue的项目,所以对 vue的语法比较熟悉,相对于react,却没有开发经验。做出选择不容易,我也是搜集各种论坛资料进行了对比,最后才决定使用react-native,没办法,想用weex,但是感觉官方不怎么重视,连官方文档有些链接都打不开,要是碰到问题解决不了我上哪查去,想想都觉得可怕。而react-native虽然都说坑多,但是网上资料多啊,至少可以问问前辈是吧。
好了,不扯多的,开发第一步,先搭建环境,至少把demo要跑起来吧,以下步骤是基于windows系统的,并且已经安装了node环境,且node版本要高于8.3(废话,这个应该都有),具体要求可参考官网文档,话说react-native中文文档还是不错的,给参与贡献的成员点个赞 https://reactnative.cn/docs/getting-started.html,现在只说android环境,毕竟windows下不支持iOS。
一、基本环境配置
1、node,node版本要高于8.3,这个应该都没有问题;
2、安装python环境,Python 的版本必须为 2.x(不支持 3.x),python具体的安装配置可以自己查,网上有很多,这里推荐一个简单的安装方法,可以打开命令行执行
npm i -g windows-build-tools
安装时间会有点长,一定要耐心等待安装结束,windows-build-tools会安装一系列 VC 环境和python2.x,可以解决很多npm报错的问题,并且会自动配置环境变量,这样就能省去很多事情。
3、安装JDK,且JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本),下载链接 https://pan.baidu.com/s/1oBmCTWy4sWmoMV1dhVVPBw;下载完成后默认安装就好,然后再进行java的环境配置:
3.1、打开环境变量>新建系统变量,变量名为JAVA_HOME,变量值为安装目录下的bin文件夹,比如我的是C:\Program Files\Java\jdk1.8.0_181,然后确定;
3.2、再新建系统变量,变量名为CLASSPATH,变量值为
.;%JAVA_HOME%\lib
注意前面的 . 和 ; 不能漏掉
3.2、找到系统变量Path,点击编辑,添加变量值
%JAVA_HOME%\bin;
完成后点击确定,然后打开命令行工具分别输入:
java --version
java
javac
如果都有提示信息则表示安装成功
二、Android Studio安装配置,其实react-native中文文档里面android studio的安装教程比较详细,大家可以参照官网的说明进行安装
1、首先下载Android Studio,下载链接:http://www.android-studio.org/index.php/download/hisversion,我下载的是3.0版本,并且没有集成SDK。下载完成后后点击安装,一路默认安装就好
注意,必须要有稳定的翻墙工具才行,不然后面下载的时候会失败导致不能成功安装
点击取消
此处选择Custom安装,然后点击下一步
点击完成
开始下载包,此处要耐心等待,由于国内限制,你可能需要科学上网才能下载成功
下载完成后点击finishi完成安装
2、安装完成后我们就可以来配置环境了
2.1、点击configure,选择SDK Manager
2.2、在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 8.1 (Oreo)选项,确保勾选了下面这些组件(重申你必须使用稳定的翻墙工具,否则可能都看不到这个界面):
Android SDK Platform 27
Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)
2.3、切换到"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的27.0.3版本。你可以同时安装多个其他版本
最后点击"Apply"来下载和安装这些组件。
全部下载完成后点击finish,然后点击OK完成安装
三、Android Studio环境变量设置
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认),如我的目录为 C:\Users\louis\AppData\Local\Android\Sdk:
SDK 默认是安装在下面的目录:
c:\Users\你的用户名\AppData\Local\Android\Sdk
你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior → System Settings → Android SDK。
你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。