搭建React-Native开发环境及运行第一个RN，APP项目

最新推荐文章于 2024-05-07 13:10:44 发布
最新推荐文章于 2024-05-07 13:10:44 发布
阅读量1.3k 收藏 1
点赞数 2
分类专栏： react native 工具类_编译环境 文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40761920/article/details/106017983
版权

搭建React-Native开发环境及运行第一个RN，APP项目

此篇文章借鉴React Native中文网，偶尔这个网站会无法访问，因此，本人参照此制作一套教程，方便以后搭建环境等。
网址：https://reactnative.cn/
如有侵权联系作者删除。

另：本人亲身实践搭建的React-Native的安装，其中还有固执的思想安装此软件，也出现了很多问题，最后终于成功，因此如果您有幸看到了我的文章是可以安装OK的！

一、安装依赖

必须安装的依赖有：Node、Python2、JDK 和 Android Studio。
前三者可以理解为环境。
虽然可以使用任何编辑器来开发应用（编写 js 代码）
但必须安装 Android Studio的目的是： 来获得编译 Android 应用所需的工具和环境。
要注意我文章中的红色字体，这些都是我被坑后留下的经验

1.1 Node, Python2, JDK配置要求

需注意 ：

  1. Node 的版本应大于等于 12（这里我们就使用12，我是12.8）。
  2. Python 的版本必须为 2.x（不支持 3.x,3x肯定不好使，我试了）
  3. JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本我也试了，肯定不好用,必须1.8，不然andriod虚拟机载入不进去软件）。
  4. 安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程（或使用科学上网工具）。
    注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！
使用nrm工具切换淘宝源
npx nrm use taobao

用npm nrm use taobao 就行
5. Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

npm install -g yarn

以上是介绍，要做的，先了解，后文我会详细的一步一步操作

1.2 jdk1.8，python2，node12配置

接下来每步都跟着做

1.2.1 Jdk1.8 下载安装及配置

网址：https://www.oracle.com/cn/java/technologies/javase-jdk8-downloads.html
在这里插入图片描述
现在的JDK环境都由Oracle中下载，因此下载jdk-8u181…exe
（这里可以理解一下：Java8与JDK1.8与JDK8与J2SE8与J2SE1.8都是一个意思）
然后默认安装到C，不会占用很大的空间！
查看java版本： java -version
在这里插入图片描述
然后配置java与javac的环境变量
第一步：在系统变量下，新建JAVA_HOME变量名，然后将jdk1.8路径放入。
在这里插入图片描述
第二步：新建系统变量CLASSPATH

参数值：.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar在这里插入图片描述
第三步：将JAVA_HOME添加到Path
在这里插入图片描述
查看是否配置成功: 成功运行javac则成功！
在这里插入图片描述

1.2.2 Python2下载安装及配置

网址：https://editor.csdn.net/md/?articleId=105987814
上面是我写过的Python下载与配置，注意一定下载2.x（也就是pyhton2教程pyhton3）下载
配置之后cmd运行python查看版本是 2.几 版本就行
在这里插入图片描述

1.2.3 nodejs12下载及配置

网址：https://editor.csdn.net/md/?articleId=105488719
上面是我写过的nodejs下载与配置，这个我没有很确定的说是否可以下载更高的版本，最好是12版本
查看node版本 使用node -v
在这里插入图片描述
以上环境配置完成后进行模拟器的安装

2.1 Android 开发环境

2.1.1. 下载和安装 Android Studio

国内用户可能无法打开官方链接，请自行使用搜索引擎搜索可用的下载链接。
安装界面中选择"Custom"选项，确保选中Android SDK，Android SDK Platform，Android Virtual Device。然后点击"Next"来安装选中的组件。如果没有选择的话，请看下面：

2.1.2 安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android4.1 以上设备）。正常使用andriodStudio即可，不用多顾虑

可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。
在 Android Studio 的欢迎界面中找到 SDK Manager。第一步：点击"Configure"，然后就能看到"SDK Manager"。
在这里插入图片描述
如果跳过了欢迎页面可以在file的setings中打开SDK管理，或者点击Tools也可以看到SDKManager。
在这里插入图片描述
在这里插入图片描述
在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。
展开Android 9 (Pie)选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：
Android SDK Platform 28
Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）
（我是任何软件都比较喜欢用新版本，从而引发很多问题，但是这里可以使用Android10，不会发生错误，不过您选择andriod9即可）
然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

最后点击"Apply"来下载和安装这些组件。
基本不管10版本，或者9版本都是需要这个Platform和Atom_64的System

在这里插入图片描述
最后会弹出下载文件，点击next 以及except来完成安装

2.1.3 配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。
（以上很重要，我们在上面通过两种方式已经改变了SDK的位置）
SDK 默认是安装在下面的目录：c:\Users\你的用户名\AppData\Local\Android\Sdk
你需要关闭现有的命令符提示窗口然后重新打开，这样新的环境变量才能生效
在这里插入图片描述
想要查看的话，在andriod sdkmanager中都可以找到。
然后加载一下
系统会通过，ANDROID_HOME找到sdk路径，这个路径提供给react-native去使用

2.1.4 把一些工具目录添加到环境变量 Path 中

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。点击新建然后把这些工具目录路径添加进去：platform-tools、emulator、tools、tools/bin

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

2.1.5 启动模拟器

然后启动一台模拟器或者手机

在这里插入图片描述
然后可以新建台模拟器，或者用绿色箭头启动模拟器
新建一台虚拟机
在这里插入图片描述
这里第一项是推荐，第二个是X86安装哪个都可。
在这里插入图片描述
在这里插入图片描述
创建成功之后可以启动一下模拟器看是否好用！

在这里插入图片描述

二、react-native的运行

在以上，步骤都配置完成后，我们俩运行我们的第一个react-native程序的运行

2.1打开cmd运行

一、切换淘宝源

使用nrm工具切换淘宝源
npx nrm use taobao

如果之后需要切换回官方源可使用
npx nrm use npm

运行第一条命令

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

npm install -g yarn

2.2 新建项目

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

npx react-native init AwesomeProject

这里会出现这个welcome界面
在这里插入图片描述

2.3 编译并运行 React Native 应用

cd AwesomeProject
yarn android
或者
yarn react-native run-android

当你的程序成功的创建完毕后，使用cd AwesomeProject进入到项目后运行项目，他会先打开你的虚拟机，然后打开node，然后载入项目等等等，最后成功的运行到自己的虚拟机中！

在这里插入图片描述
在这里插入图片描述
当你看到这个界面说明你已经配置成功！！！
在这里插入图片描述

三、总结：

由于配置并运行起来，这个RN（react-native）需要很多的环境，并且还有极度的要求
我遇到过的问题有：andriodStudio的AVD虚拟机无法成功安装app、端口被占用等，但一次次的重新配置等，让我发现在以下的版本很重要（我当时就喜欢用新的，于是node是13版本，Python是3.8.2版本，jdk是14.0.1 哈哈哈）
因此再一次强调：
Node 的版本应大于等于 12（这里我们就使用12，我是12.8）。
Python 的版本必须为 2.x（不支持 3.x,3x肯定不好使，我试了）
JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本我也试了，肯定不好用,必须1.8，不然andriod虚拟机载入不进去软件）。

AndriodStudio的作用是提供虚拟机以及，运行环境
因此在运行RN时可以不用打开AndriodStudio甚至虚拟机都不需要打开，创建后成功运行即可

以上的长篇大论就是我第一次使用RN安装全过程，如果对您的使用有帮助，也请点赞评论转发三连一下，让更多人看到贴纸

lianghaibos
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
RN：在电脑上运行出第一个Hello React Native
m0_65544705的博客
10-12 144
继续选择新建，创建CLASSPATH变量值为，然后继续点击确定。
android studio虚拟机运行react-native项目全流程（避坑笔记）
热门推荐
在下月亮有何贵干
01-31 1万+
年终了，给自己换了台r9000p，快乐还没享受呢，想着要先把原来电脑的环境和项目重新配置过来，开始崩溃了。公司的项目是rn的，我就配个android studio的虚拟机，给我配出心理疾病了，到处都是问题解决一个又来一个。做了流程，防止还有下一次，如果没有入坑过的可以试试全程下来，应该会少很多问题。
运行react native
acxingyun的博客
08-03 736
环境搭建和运行参照网上的教程安装一系列的工具，然后进入一个路径比如F盘，打开git命令行，输入：react-native init projectname会新建一个projectname的文件夹，之后进入该文件夹，在git中输入：react-native start等一会，显示下面提示说明服务起来了： 也可以点击下面链接看服务是否启动： http://localhost:8081/index
2024年安卓最新【Android】ReactNative Android端启动流程，阿里面试官必问
最新发布
2401_84545804的博客
05-07 607
网上高级工程师面试相关文章鱼龙混杂，要么一堆内容，要么内容质量太浅， 鉴于此我整理了上述安卓开发高级工程师面试题以及答案。希望帮助大家顺利进阶为高级工程师。目前我就职于某大厂安卓高级工程师职位，在当下大环境下也想为安卓工程师出一份力，通过我的技术经验整理了面试经常问的题，答案部分是一篇文章或者几篇文章，都是我认真看过并且觉得不错才整理出来。大家知道高级工程师不会像刚入门那样被问的问题一句话两句话就能表述清楚，所以我通过过滤好文章来帮助大家理解。现在都说互联网寒冬，其实只要自身技术能力够强，咱们就不怕。
React Native运行
whuzjn的专栏
03-24 3637
1、创建/拷贝项目 在cmd控制台（Workspace目录）使用命令react-native init AwesomeProject创建名称为【AwesomeProject】的项目 如果引入的项目是从其他地方拷贝过来的，可能需要安装RN的依赖包，执行命令如下： cd AwesomeProject npm install 2、开启服务 在cmd控制台（项目目录）启动RN服务，执行命...
安卓上运行第一个RN项目
愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~
02-02 1088
前言   RN即React Native的简称，是基于React框架的语法进行开发的，用来开发移动端的项目。 步骤   1.在配置好环境的基础上，创建第一个RN项目，执行cmd命令npx react-native init AwesomeProject，如果可以连接外网的话建议连接外网。   2.通过USB连接手机和电脑，nubia手机连接之后默认就开启了开发者模式，可以在cmd命令窗口中使用ad...
React Native 初次使用
HerSpoon的博客
05-24 539
一、配置环境【Android + Windows】1、安装jdk官网地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html这里需要注意对环境变量的设置，可以根据java -version来检测一下,jdk最好是1.8。PS：Android Studio需要Java Development Kit [JDK] 1.8...
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
01-21
最近都沉浸在react native原生app开发中，之前也有使用vue/react/angular等技术开发过聊天室项目，另外还使用RN技术做了个自定义模态弹窗rnPop组件。 一、项目简述 基于react+react-native+react-navigation+react-...
react-native-app-upgrade：ReactNative App版本升级封装，支持Android，iOS
02-24
React Native App版本升级封装库，兼容Android 4-最新版本一，功能安卓（1）版本检测（2）下载更新（3）进度提示（4）自动安装的iOS （1）版本检测（2）自动跳转App Store二，使用 yarn add rn-app-upgrade // 低于...
react-native-syan-image-picker：React-Native多图片选择支持裁剪压缩
02-04
基于现有原生第三方框架封装的多图片选择组件，适用于React Native App。 原生框架依赖 安卓： - iOS： 通过 功能特点 支持iOS，Android两者 支持单选，多选 可自定义裁剪区域大小，支持圆形裁剪 可设置压缩质量 可...
react-native-exit-app：完全针对iOS和Android上的React Native的退出，关闭，杀死，关机应用程序
02-05
注意： 对于React Native <0> 0.47，请使用react-native-exit-app> = 1.xx建立快速简便： npm install react-native-exit-app --savereact-native link react-native-exit-app 或手动：将最新版本视情况添加到...
react-native-smooth-pull-to-refresh:自定义拉动以刷新React Native的组件
05-02
安装安装套件$ npm install --save react-native-smooth-pull-to-refresh# or$ yarn add react-native-smooth-pull-to-refresh示范项目基本用法import { PullToRefreshView } from "react-native-smooth-pull-to-...
手机app开发可选技术——React Native
manerzi的博客
11-01 2495
手机app开发可选技术——React Native
超详细 React Native 入坑使用指南，我在元宇宙等你
qq_15041931的博客
12-19 8476
前言 大家好，我是虚竹，今天给大家分享一下我是如何快速通关打怪搭建 React Native 跨端开发环境，并使用大家非常熟悉的开发工具 VSCode 来编写丝滑般的代码。编写丝滑般代码会再下一篇输出，包括项目实战经验总结和踩坑，如目录架构、函数式编程、React Hook 灵活运用、常见场景、开发调试、发布部署、踩坑、性能优化等等。 之前因为在我的技术群，收到群友@我，问能否出一个保姆级 React Native 搭建开发环境的教程，我说照着官方文档步骤操作即可。可惜事与愿违没那么顺利，流程上繁琐不够清晰
React-native 搭建开发环境指导【5】-------编译并运行
打不死我的终将使我强大
12-26 536
这个环节是出问题最多的地方。操作很简单，遇到问题也不要慌。都能解决。 在所创建的项目路径下，打开cmd窗口。输入命令行 react-native start 这一步是在打开packager，也可以在Android Studio 自带的Terminal窗口运行命令。 可以用浏览器访问 http://localhost:8081/index.bundle?platform=android 8081...
运行RN项目常见问题汇总
weixin_43362136的博客
07-14 973
第一次接触RN，在尝试跑通小组已有项目的过程中遇到了不少问题，下面将对这些问题进行简单汇总与整理。 一、无法编译&运行 可能是adb版本不匹配 二、> Task :react-native-community_progress-bar-android:generateDebugBuildConfig FAILED 可能的解决办法： cd android && gradlew clean cd android //从项目根目录导航到android文件夹 gr
超详细Windows版本编译运行React Native官方实例UIExplorer项目(多图慎入)
江清清的专栏
02-14 1万+
(一)前言         特别说明:群里很多童鞋都在说想Windows系统官方实例，但是官方提供的文档以及网上的例子都是OS X版本。今天特意给大家更新一下Windows版本运行官方 实例(UIExporler)全过程。俗话说学习一样新东西的时候，例如这边我们要学React Native的组件使用，那么最好的学习资料就是官方提供的材料了，作作为开发人员最好的学习资料就是源码，幸好官方给我们提供了
[快速上手RN] 0.React Native 快速启动项目
iMingzhen的博客
02-22 4082
在你的手机上快速启动一个APP
react native 如何安装react-native-nfc-android
06-10
要在 React Native 中使用 NFC 功能，需要安装 react-native-nfc-android 模块。下面是安装步骤： 1. 首先确保已经安装了 React Native，可以使用以下命令来检查： ``` react-native --version ``` 2. 在项目目录下使用 npm 安装 react-native-nfc-android 模块： ``` npm install --save react-native-nfc-android ``` 3. 在 Android 项目中添加 react-native-nfc-android 模块。可以手动添加或者使用 react-native link 命令： 手动添加：将以下代码添加到你的 `android/settings.gradle` 文件中： ``` include ':react-native-nfc-android' project(':react-native-nfc-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-nfc-android/android') ``` 然后在 `android/app/build.gradle` 文件中添加以下依赖： ``` dependencies { // ... implementation project(':react-native-nfc-android') } ``` 使用 `react-native link` 命令：在项目目录下运行以下命令： ``` react-native link react-native-nfc-android ``` 4. 最后，在你的 JavaScript 代码中导入 `react-native-nfc-android` 模块： ``` import { NativeModules } from 'react-native'; const { RN NFC } = NativeModules; ``` 现在你可以使用 `RN NFC` 模块来访问 NFC 功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值