[ReactNative] 初识ReactNative

最新推荐文章于 2025-11-26 22:21:13 发布

转载最新推荐文章于 2025-11-26 22:21:13 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b8f6495e51d450e5c471822

文章标签：

#移动开发 #python #java

本文详细介绍了2018年ReactNative开发环境的搭建过程，包括Node、JDK、Python等基础环境配置，以及AndroidStudio的安装与设置，最后完成ReactNativeCli的安装并创建初始工程。

前言

截至到2018年9月，在国内跨平台移动端开发技术里面主要是ReactNative和Weex。2018年6月Google的Flutter也进入了Beta阶段（后续此技术发展如何还要看Google的推广力度）
由于ReactNative在各个版本上都有一定变化（截止到2018年9月最新版本是0.56），本次我们就来聊下如何快速搭建ReactNative的开发环境

Node，JDK，Python

Node安装官网的长期维护版本即可
附链接：https://nodejs.org/zh-cn/
JDK一定要1.8版本，否则在打包Android时会报错。安装好JDK后，注意配置好JDK的Path和CLASSPATH，确保cmd命令下，以下三个命令可以正常执行，则代表环境变量配置无误
```
 java -version
 javac
 where java
复制代码
```
附链接：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Python必须是2.x版本，目前我使用的是Python2.7。安装好Python后，注意配置Python的Path，确保cmd命令下，python命令可以正常执行
```
python
复制代码
```
附链接：https://www.python.org/downloads/release/python-2712/

AndroidStudio

AndroidStudio目前我使用的是3.1.4版本
安装界面中选择Custom，并确保以下几项勾选

Android SDK （需要Android 8.0 Oreo版本）
Android SDK Platform （Android SDK Platform 26）
Performance (Intel ® HAXM)
Android Virtual Device

安装完成后，配置ANDROID_HOME环境变量
我的环境变量路径如下（即你电脑上的AndroidSDK的根目录作为ANDROID_HOME的环境变量）

E:\AndroidSDK\SDK
复制代码

然后在Path下添加：

%ANDROID_HOME%\tools
%ANDROID_HOME%\platform-tools
复制代码

当在cmd命令下，执行

adb
复制代码

并得到反馈时，说明环境变量配置成功

潜在问题

当创建好Android Virtual Device（Android虚拟设备）并启动时，如果启动失败，需要关闭电脑，然后进入BIOS里，设置Intel Virtual Technology为Enable

ReactNative Cli

在cmd命令下执行

npm install -g react-native@0.55.4
npm install -g react-native-cli@1.2.0
复制代码

这里的版本号必须是这两个版本，否则App打包后，界面中会提示error 500 完成后，执行命令创建初始工程

react-native init myFirstApp
复制代码

进入工程中

cd myFirstApp
复制代码

安装依赖

npm install
复制代码

准备开始

运行x86 Image的Android Virtual Device，然后在工程目录下执行

react-native run-android
复制代码

等待命令全部通过后 Android virtual Device自动打开App

效果如下：

总结

本章节主要介绍目前搭建ReactNative开发环境的流程，有问题欢迎大家多多指正~

转载于:https://juejin.im/post/5b8f6495e51d450e5c471822