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项目的启动流程

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页