先贴一下官网https://reactnative.cn/docs/getting-started.html
实际上如果全部按照官网说的做是完全没问题的,但有的人会说我明明是按照官网来的啊,但还是不能正确生成一个项目,那可能是有些地方你没仔细看。我这里因为之前就已经搭建好JDK和SDK的环境了,所以实际顺序应该是下面这样。
说一下准备工作:
1、安装node
2、安装python
3、安装JDK
4、安装SDK
5、配置环境
6、安装react native并新建项目
根据官方文档要求:注意 Node 的版本必须高于 8.3,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)。安装完 Node 后建议设置 npm 镜像以加速后面的过程(或使用科学上网工具)。
所以我下载的是新版的http://nodejs.cn/download/,安装路径随便,但是一点要配置环境,当然,如果你下的是安装文件,一般自动帮你配置好环境。具体在系统变量的path中添加node.exe所在目录路径,保存确定后就可以了。比如我的是E:\Develop\Nodejs\,注意要用英文分号“;”与其他的分隔开。
python在安装完成之后也要配置环境,也是在系统变量path中添加python.exe所在目录路径和python.exe所在目录路径\Scripts,比如我的是E:\Develop\python\;E:\Develop\python\Scripts;
JDK和SDK的环境变量配置网上有很多,但这里我提醒一下,为避免导致后面出现如下图所说的问题,务必要在系统变量中新建变量JAVA_HOME和ANDROID_HOME,并把对应的路径也添加进去,如果改成其他名字可能会出现在新建完react native项目后执行命令react-native run-android出现找不到JAVA_HOME或是ANDROID_HOME的问题,即使你在path中是配置了完整路径的。
接下来就是安装react native
打开命令窗口,依次执行以下命令
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
npm install -g yarn react-native-cli
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
如果上面的命令执行出现XXX命令不是内部命令,那么应该是你修改了npm默认路径,比如下面这样。
npm config set prefix E:\Develop\npm
npm config set cache E:\Develop\npm\cache
解决办法是将默认路径修改回来从新执行安装命令,或者配置对应命令的环境变量。对应上面的修改,假如我yarn和react native的安装在新路径下,我需要在path中添加
E:\Develop\npm\node_modules\yarn\bin
E:\Develop\npm\node_modules
E:\Develop\npm
好了,到这里就可以开始新建项目了,下面是直接复制官方文档的一段话
使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目:
react-native init AwesomeProject
提示:你可以使用
--version
参数(注意是两
个杠)创建指定版本的项目。例如react-native init MyApp --version 0.44.3
。注意版本号必须精确到两个小数点。
Windows 用户请注意,请不要在某些权限敏感的目录例如 System32 目录中 init 项目!会有各种权限限制导致不能运行!
如果你是想把 React Native 集成到现有的原生项目中,则步骤完全不同,请参考集成到现有原生应用。
一般来说,只要react native安装成功,在网络通畅的情况下新建项目不会有问题产生,大部分问题是发生在最后执行react-native run-android这个命令是发生的,在这之前不推荐使用Android studio等ide打开项目并执行run或build之类的。具体的错误在命令执行完之后会返回到命令窗口,大体上离不开环境变量配置不正确这几种情况,当然,有时网络特别差也会构建项目时下载文件失败从而导致上面图片出现的那种情况。
我运行完后出现的问题返回结果如下
* What went wrong:
A problem occurred configuring project ':app'.
> Failed to install the following Android SDK packages as some licences have not been accepted.
build-tools;28.0.3 Android SDK Build-Tools 28.0.3
platforms;android-28 Android SDK Platform 28
其实就是缺少Android-28,打开SDK manager把该安装的安装,该更新的更新,然后再运行一遍。
于是出现了下面这个问题:
* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!
找到app下的bundle.gradle,打开并去掉
buildToolsVersion rootProject.ext.buildToolsVersion这句话,因为会导致版本不匹配。
然后再一次执行run,看到又绿又黄的就没问题了,第一次觉得绿顶是那么赏心悦目~
祝各位好运。