JB的React Native 之旅-环境搭建及概念了解-优快云博客

本文介绍了ReactNative的基础知识及Windows环境下搭建ReactNative开发环境的步骤，并分享了在实际操作过程中遇到的问题及其解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

先说下背景吧，并非说做开发，而且最近在有个产品是用React Native做的，当然已经顺利发布了，但是呢，有个问题，就是打包太久了，平均下来，打一次包要20分钟，像在项目后期，要一下子打好几个包，由于公司只有一台打包机，就一直在等了，效率是个大问题;
这个问题跟研发反馈了，但是没时间处理，而且研发也觉得不是大问题，能用就好~
但受害者是测试啊，所以这个问题只能靠自己了，那就自己搭环境，自己跟进这个问题吧~

React Native是啥？

别笑，小弟真的不知道；开玩笑的，RN很出名了，是Facebook开源的JS框架React在原生移动平台的衍生物，一套代码支持安卓跟IOS，很牛逼的说；

最重要是跨平台！！

React，React.js, React Native

这3个，到底有啥关系？

1)React 是基础框架,提供了一套基础设计实现理念，并不能直接用来开发，就好比马克思主义对于我党的作用一样。
2)React.js 是在React理念的指导下产生的专门用来开发网页的框架.与React同时出现和发展，React的相关概念都在React.js文档中。
3)React Native 是用来开发移动应用。
需要用到React概念,但是不需要React.js的东西。

要求：

1）学习React Native 需要了解基础的JavaScript基础知识
2）最好了解一下android跟ios其中一门开发，因为react native偶尔需要借助原生的代码是实现

混合开发

React Native支持混合开发,大致分为三种情况。

1）UI界面由React Native开发, 但UI事件处理由原生代码执行；
2）将原来使用的原生代码实现的UI小部件包装成React Native的自定义控件;
3）应用界面在React Native开发的界面与原生代码开发的界面间进行切换，React Native的强项就是UI开发,在混合开发中,能用React Native开发的界面,优先用React Native开发.

优缺点

优点：
1）可以大大节省开发成本，百分之90多界面可以通过RN开发，一份代码可以适配android和ios；
2）RN有独特的UI实现框架，借助组件化开发是团队规模更容易进行跳转，可以达到快速迭代的效果；
3）RN可以通过一些手段自动匹配不同屏幕大小的手机，再也不用自己去计算视图大小和位置；

缺点：
1）RN开发的程序内存消耗略搞，开发模式下开销大几十M，发布后差异不大，内存占用会比较高；
2）运行速度慢；
3）安装包比原生代码在安装包大；

React Native开发环境搭建

这里只介绍Windows下搭建安卓的，如果是其他平台或者需要搭建IOS的，请移步到此处查看；

node

首先，是需要安装nodejs，直接点击nodejs官网即可下载,这里需要注意，要求node版本要在4.0以上，确保正常，直接在官网下载最新的版本吧；

直接点击后，就会自动下载，下载完毕后，一键默认安装，点点点就好了，这里不说明；

安装完成，点击开始=》运行=》输入"cmd" =>node -v

如果能正常显示版本号，则说明已经安装成功，如果不能显示版本号，则把nodejs的安装路径配置到path环境变量，重试即可；

Android Studio

直接网上搜索Android Studio下载安装就行了，但是部分资源网速过慢，这里提供一个3.1.2版本的链接，需要的同学自取：

链接：https://pan.baidu.com/s/1DZPogc6G78jo9Q6YA8ZNIg 密码：a5k0
复制代码

安装后可直接升级到3.1.4版本；

安装后打开，安装sdk，自行选择需要的sdk进行下载即可，需要点时间，如下：

下载完android studio跟sdk，那就配置环境变量；

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为
ANDROID_HOME的环境变量，指向你的 Android SDK 所在的目录,SDK 默认是安装在下面的目录：

c:\Users\你的用户名\AppData\Local\Android\Sdk

顺便把Android SDK的Tools目录添加到PATH变量中，比如adb这种工具还是能用到的；
复制代码

Ok,安卓相关的配置，就到此为止了，接下来看React Native；

创建React Natice工程

1）安装react-native命令行工具

npm install -g react-native-cli
复制代码

如果不行，可以切换镜像源，然后再次输入下上面的命令：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
复制代码

2）创建项目，进入工作目录，运行：

cd d:
mkdir react-native-jbtest
cd react-native-jbtest
react-native init jbtestproject
复制代码

然后就耐心等待一段时间吧

3）运行packager

cd jbtestproject
react-native start
复制代码

看到这样，就说明可以了；

4）安卓运行，保持packager开启，另外打开一个新的命令行窗口，然后再工程目录下运行：

react-native run-android
复制代码

首次运行需要等待数分钟并从网上下载gradle依赖；
正常来说，此时应该看到这样的界面：

当看到上面这图片时，说明已经成功了，接下来就可以愉悦的开发了；

遇到的问题

一般这种环境配置的问题，肯定不会一帆风顺的，表面上的一帆风险，实际是经历过大风大浪的；

1)执行react-native run-android时报错

原因是因为没有配置ANDROID_HOME，那就老老实实配置下吧~

2）手机安装后，屏幕显示红色

网上说好多解决方案，比如改host，设置native version版本跟JS一致等方案，但是试了没一个可行。。

然后就换了台5.X的手机，瞬间，错误提示变成这个~

然后看了下，本地JS报这个错

该错误信息说明在在ndk的主目录文件夹下找不到“ndk-build”文件，因为Android Studio未自带NDK开发工具，因此会出现此错误。到此点击打开链接下载对应版本，下载完毕后将其解压，将其内部的所有文件全部移动至新建的ndk-build文件夹下;

但依然报上面红色提示框的错误：error code 500,继续看，
js报 Unable to resolve module AccessibilityInfo

看了下版本：

C:\WINDOWS\system32>react-native -v
react-native-cli: 2.0.1
react-native: 0.56.0
复制代码

网上建议是降低版本，如下处理：

先卸载：
C:\WINDOWS\system32>npm uninstall -g react-native-cli
removed 41 packages in 3.999s

安装指定版本：
npm install react-native@0.55.4

继续安装：
npm install -g react-native-cli@1.2.0

再项目初始化的时候指定下
react-native init --version="0.55.4" myprojectname
复制代码

然后继续红屏，继续看，
JS报错，Module build failed: Error: Plugin 0 specified in “base” … provided an invalid property of “default”

执行下面这命令就可以了：

npm install --save-dev babel-preset-react-native@2.1.0
复制代码

至此，终于看到了这个界面了，连之前有问题的4.X都可以正常了，可喜可贺~：

3）导入一个RN工程，直接运行提示

> Could not read script 'C:\Users\jb\gitprojects\jb\node_modules\react-native\react.gradle'
as it does not exist.
复制代码

原因是没有node_modules这个目录，怎么解决？直接在这个工程下执行npm install 即可

小结

本文主要介绍了React Native的一些基础知识，以及在Windows下如何搭建环境，入门篇；

谢谢大家~