React-Native开发环境搭建

开发环境搭建教程

万事开头难，开始学习前React-Native之前，我们首先需要搭建React-Native的开发环境。关于React-Native开发环境搭建的教程网上已经有很多了，在这里不再进行赘述，下面列一些推荐的环境搭建教程：

1. React-Native中文社区搭建教程（推荐理由：涵盖了Windows、macOS、Linux等系统，介绍详细全面）
2. Ubuntu（Linux）系统Android开发环境搭建 （推荐理由：步骤非常详细，且包含大部分错误的解决办法）
3. Windows系统Android开发环境搭建（推荐理由：图文并茂，内容详细）
4. Windows系统Android开发环境搭建—TrustTheBoy笔记（推荐理由：推荐理由：图文并茂，内容详细）

环境搭建常见问题总结

问题1. 找不到ANDROID_HOME环境变量

错误描述：

java.lang.RuntimeException: SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

问题原因：

工程找不到我们的android SDK。

解决方法：

1、在系统中增加ANDROID_HOME环境变量（推荐）。

Windows设置环境变量的方法：

Linux设置环境变量的方法：

macOs设置环境变量的方法：

2、在工程的根目录下的android文件下新建一个local.properties的文件（我们可以直接拷贝Android项目的local.properties的文件）。

问题2. Build Tools revision版本与SDK中的不一致

错误描述：

A problem occurred configuring project ‘:app’.>failed to find Build Tools revision 23.0.1

问题原因：

工程找不到我们的android SDK。

解决方法：

将项目中的build.gradle和gradle中gradle-wrapper.properties的版本更改为同一版本。

问题3. 找不到可运行的设备

错误描述：

Could not install the app on the device, read the error above for details.

错误原因：

这个是因为未找到运行的设备

解决方法：

在运行命令：react-native run-android之前一定要确保手机已经连接上电脑。

更多问题总结请参考链接：React-Native遇坑总结（定期更新）

React-Native目录介绍

按照上面的教程搭建好开发环境后，在命令行执行以下代码创建AwesomeProject项目：

react-native init AwesomeProject

启动 Node.js Web Server ：

react-native start

启动 Android

react-native run-android

启动 iOS

react-native run-ios

如果开发环境没有问题，会在虚拟机/真机上看到以下界面：

在文件管理器中，我们打开AwesomeProject文件夹，会看到以下目录结构：

项目结构介绍：

• __tests__：项目测试目录，可用于单元测试和自动化测试
• **android：**android平台的项目源代码，可以使用android studio打开、查看和编辑这个目录下面的源代码。
• **ios文件夹：**ios平台的项目源代码，可以使用xcode作为项目打开、查看和编辑这个目录下面的源代码。
• **node_modules：**react-native框架源代码，是node通过解析package.json下载的依赖，一般不需要修改这个目录下的文件，且不建议将这个文件夹上传到版本管理系统(SVN、Git等)，每次下载安装最新的源代码即可。
• App.js： Android和iOS项目共享的javascript源代码。
• index.js： 是Android和iOS的React-Native的入口。
• package.json： 是React-Native的配置文件。
• yarn.lock：

上一章讲解内容：初识React-Native
下一章讲解内容：React-Native项目的启动流程