首页 / REACT / React Native搭建开发环境并创建一个示例项目

React Native搭建开发环境并创建一个示例项目

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了React Native搭建开发环境并创建一个示例项目，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4544字，纯文字阅读大概需要7分钟。

内容图文

React Native搭建开发环境并创建一个示例项目

搭建环境

根据你所使用的操作系统、针对的目标平台不同，具体步骤有所不同。如果想同时开发 iOS 和 Android 也没问题，你只需要先选一个平台开始，另一个平台的环境搭建只是稍有不同。

安装依赖

必须安装的依赖有：Node、JDK 和 Android Studio。
虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。

建议直接使用搜索引擎搜索下载 Node、Android Studio 和Java SE Development Kit (JDK)

注意 Node 的版本应大于等于 12，而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本，注意 1.8 版本官方也直接称 8 版本）。安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程。

注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！

使用nrm工具切换淘宝源
npx nrm use taobao
如果之后需要切换回官方源可使用
npx nrm use npm

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

然后我们就可以开始安装Android开发环境了

1. 安装 Android Studio
安装界面中选择"Custom"选项，确保选中了以下几项：
Android SDK
Android SDK Platform
Android Virtual Device
然后点击"Next"来安装选中的组件。
2. 安装 Android SDK
Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 10 (Q)版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android 4.1 以上设备）。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。
你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。
React Native搭建开发环境并创建一个示例项目 - 文章图片
在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 10 (Q)选项，确保勾选了下面这些组件（重申你必须使用稳定的代理软件，否则可能都看不到这个界面）：

  • Android SDK Platform 29
  • Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件)

然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的29.0.2版本。你可以同时安装多个其他版本。

然后还是在"SDK Tools"选项卡，点击"NDK (Side by side)"，同样勾中右下角的"Show Package Details"，选择20.1.5948944版本进行安装。

最后点击"Apply"来下载和安装这些组件。
3. 配置 ANDROID_HOME 环境变量
React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录（具体的路径可能和下图不一致，请自行确认）：
React Native搭建开发环境并创建一个示例项目 - 文章图片

SDK 默认是安装在下面的目录：
C:\Users\你的用户名\AppData\Local\Android\Sdk
(可更改)

你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是Appearance & Behavior → System Settings → Android SDK。

你需要关闭现有的命令符提示窗口然后重新打开，这样新的环境变量才能生效。
4. 把一些工具目录添加到环境变量 Path

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

React Native搭建开发环境并创建一个示例项目 - 文章图片

创建示例项目

如果你之前全局安装过旧的react-native-cli命令行工具，请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突。

桌面新建文件夹后终端cd进去
输入npx react-native init ‘项目名’
会自动创建生成一些文件夹
React Native搭建开发环境并创建一个示例项目 - 文章图片
准备 Android 设备
你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机，也可以是模拟器。

使用 Android 真机来代替模拟器进行开发，只需用 usb 数据线连接到电脑即可

最好使用手机原厂的数据线
连接电脑后USB选择传输文件模式
打开手机的开发者选项，将USB调试、USB安装打开
如果手机有 USB调试(安全设置) 该选项请打开

你也可以使用 Android Studio 打开项目下的"android"目录，然后可以使用"AVD Manager"来查看可用的虚拟设备，它的图标看起来像下面这样：
React Native搭建开发环境并创建一个示例项目 - 文章图片
如果你刚刚才安装 Android Studio，那么可能需要先创建一个虚拟设备。点击"Create Virtual Device…"，然后选择所需的设备类型并点击"Next"，然后选择Q API Level 29 image.

请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。

确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行
终端输入

yarn android
或者
yarn react-native run-android

如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的代理软件，否则将频繁遭遇链接超时和断开，导致无法运行。

React Native搭建开发环境并创建一个示例项目 - 文章图片
成功后此时会弹出一个新的命令框
这里的r是重新加载界面，d是打开页面菜单
React Native搭建开发环境并创建一个示例项目 - 文章图片
如果连接了真机，你的手机此时会弹出一个安装应用弹框允许安装并打开，到此一个建单的示例项目就完成了，你可以在创建文件中的找到App.js进行代码修改，你的手机界面也会同步被修改。

恭喜！你已经成功运行并修改了你的第一个 React Native 应用

内容总结

以上是互联网集市为您收集整理的React Native搭建开发环境并创建一个示例项目全部内容，希望文章能够帮你解决React Native搭建开发环境并创建一个示例项目所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1002211.html

来源：【匿名】