React-Native环境搭建各种问题处理

最新推荐文章于 2025-06-09 17:58:20 发布
原创 最新推荐文章于 2025-06-09 17:58:20 发布 · 2.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react-native

本文分享了React Native开发环境的搭建过程及解决多种常见问题的经验，包括环境搭建时的各种坑、模拟器启动失败的解决办法以及红屏问题的处理方案。

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

最近打算入门学习react-native的开发，但是在环境搭建时候出现了各种问题。在这里跟大家分享下我踩过的各种坑。

环境搭建：根据官网http://facebook.github.io/react-native/ 给出的步骤。环境很容易就搭建起来了

               1、安装node brew install node

               2、安装watchman brew install watchman

               3、安装react-native-cli npm install -g react-native-cli

               4、构建项目 react-native init AwesomeProject

这样我们就创建了一个react-native的工程。只需要cd到AwesomePreject目录下执行命令行react-native run-ios 就会在ios的模拟器上运行你的RN项目。

问题1：

执行react-native run-ios命令时报错：

Command failed: /usr/***/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/imoocApp.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist

这个问题网上大多数人给出的办法是：

1、删除工程目录下的node_modules

2、删除相关的build文件夹执行

npm install

这个方法让我想起了我们那个年代的网管，没有什么机器问题是重启解决不了的。但是对于我遇到的这个问题然并卵。可能根据react构建项目时候不同版本遇到的问题解决方式不一样。

还有一部分人给出的解决方案是：

react-native init MyApp --version 0.44.3

使用这行命令行构建项目实际是构建了一个react 0.44.3版本的RN项目。虽然构建出的项目可以解决上述的问题。但是版本比较老。根据最新的版本0.54比项目的结构和新版本差距很大。并得不到想要的理想结果。

最终方案：

这个我参考了一个博主的方案 https://www.cnblogs.com/erniu/p/8670590.html

第一步：下载正确的boost_1_63_0.tar.gz覆盖~/.rncache/boost_1_63_0.tar.gz，下载地址在这里boost_1_63_0.tar.gz


第二步：使用shasum跑出~/.rncache/boost_1_63_0.tar.gz的hash字符串备用
➜  ~ shasum ~/.rncache/boost_1_63_0.tar.gz
f8e4d5aeaa65f429f4135b037d3c3528be5ebf77  /Users/erniu/.rncache/boost_1_63_0.tar.gz


第三步：打开项目中的node_modules/react-native/scripts/ios-install-third-party.sh，替换boost_1_63_0.tar.gz的hash串为你第二步中得到的hash串

fetch_and_unpack glog-0.3.4.tar.gz https://github.com/google/glog/archive/v0.3.4.tar.gz 69f91cd5a1de35ead0bc4103ea87294b0206a456 "\"$SCRIPTDIR/ios-configure-glog.sh\""
fetch_and_unpack double-conversion-1.1.5.tar.gz https://github.com/google/double-conversion/archive/v1.1.5.tar.gz 96a8aba1b4ce7d4a7a3c123be26c379c2fed1def
# fetch_and_unpack boost_1_63_0.tar.gz https://github.com/react-native-community/boost-for-react-native/releases/download/v1.63.0-0/boost_1_63_0.tar.gz c3f57e1d22a995e608983effbb752b54b6eab741
fetch_and_unpack boost_1_63_0.tar.gz https://github.com/react-native-community/boost-for-react-native/releases/download/v1.63.0-0/boost_1_63_0.tar.gz f8e4d5aeaa65f429f4135b037d3c3528be5ebf77
fetch_and_unpack folly-2016.09.26.00.tar.gz https://github.com/facebook/folly/archive/v2016.09.26.00.tar.gz f3b928b5039235bad6cece638c597c6684d1e4e6
第四步：好了，这时候重新再编译一次，不出意外就正常跑起来了。


正当我欢呼雀跃的时候问题又出现了上述问题，只是跟之前比多编译了一些文件而不是卡在那里半天才报错。虽然没成功但是还是很高兴，毕竟觉得离成功进了一步。在网上又试了很多办法之后都米有效果。最终在看网易云课堂搭建RN环境教程里看到了一个视频他用的RN版本是0.52的。于是试了一下成功了

解决方案：

修改工程目录下的package.json文件里的配置信息

"dependencies": {
"react": "16.2.0",
"react-native": "0.52.0"
},
"devDependencies": {
"babel-jest": "22.4.3",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.3",
"react-test-renderer": "16.2.0"
},

版本号分别换成16.2.0和0.52.0执行react-native run-ios

模拟器成功启动了工程。0.52和0.54之间差距不是很大。是目前找到最好的结局方案了。完结撒花感动到泪奔~~~~~~~~~~~~

=================================

然而那是不可能的，项目跑起来后出现了红屏的问题。

模拟器上给出的提示是

No bundle URL present

Make sure you’re running a packager server or have included a .jsbundle file in your application bundle


网上一搜，又搜出来一批重启的网管。依然解决不了我的问题。

然后在Stack Overflow上看到了一些人给出的解决方案是修改工程目录下/ios/工程名称/AppDelegate.m文件里的变量jsCodeLocation 如下所示

jsCodeLocation =

这个方法有的人可能问题会解决，我在其他的版本试过这个方法，能解决这个红屏的问题，虽然还没有正经的开发RN项目。但是可以看出这一步是写死了127.0.0.1：8081这个ip去启动项目。估计在后期打包时候或者开发时候会有很多不便。所以不是最理想的方案。并且在0.52这个版本也解决不了红屏的问题会出现另一个红屏错误。

我是做android和node.js开发的。对于oc的语言不是很了解。但语言都是相通的，仔细研究了下他的代码。发现他这里想要取localhost的ip参数。

于是想到了修改host文件,终端输入一下命令

sudo vi /private/etc/hosts

在hosts文件里加入下行文字保存

127.0.0.1       localhost

这里考虑到一些不会用vim编辑器的小伙伴可以在finder中使用快捷键command+shift+G 弹出跳转窗口输入“/private/etc/hosts”，点击【前往】进行修改。

然后执行

react-native run-ios

总算跑起来了，然后又试了一下安卓。

react-native run-android

果然没有想象的那么顺利报错了。具体报的什么错忘记了。只记得是因为我的mac没做配置android的环境变量导致的

具体怎么配置android的环境变量百度或者google一搜一大把。

目前对react-native还不是太了解，只是用这个框架只是做了一些简单的页面玩了玩，觉得还是挺强大的一个框架。一些简单的资讯类app完全可以用RN来开发。一端开发同时支持ios和android两个平台，并且还支持热更新。解决了一些审核不必要的麻烦。但是如果要做深层次叫交互还是原生的效果比较好一些。不会像很多人说的那样，有的人说RN以后会强大起来写原生的就要下岗了。我觉得近两三年还不至于。两三年之后会不会有什么概念性的产品出来还是未知呢。就像当年虽也没想到诺基亚和他的塞班会被淘汰一样。几年之后会不会有更先进的东西来推翻苹果和安卓也说不定。

React-native开发环境搭建(Windows平台)
weixin_39065287的博客
11-01 1611
React-native开发环境搭建Windows平台
React Native开发环境搭建
m0_56344834的博客
11-02 2888
React是一个构建用户界面的JS框架，实现了数据的响应式和组件化开发，本身既可以用于Web网站项目，也可以用于创建移动端App项目。相较于Vue.js在移动端只能构建WebApp，React生态系统中有一个可以构建“真正原生App”的扩展 —— React Native，可以这样说：“RN是React生态圈可以傲视其它对手的绝对功臣”。
ftp操作文件报“550 create directory operation failed”解决方法
qq_38513966的博客
01-05 1万+
在etc/vsftpd.conf中，修改， anonymous_enable=NO local_enable=YES write_enable=YES chroot_local_user=NO chroot_list_enable=NO listen=YES listen_port=21 local_root=/ 即可
FTP：文件传输协议(指令及响应代码)
蓝色幻想
07-23 1万+
文件传输协议（FTP）使得主机间可以共享文件。 FTP 使用 TCP 生成一个虚拟连接用于控制信息，然后再生成一个单独的 TCP 连接用于数据传输。控制连接使用类似 TELNET 协议在主机间交换命令和消息。　　FTP 的主要功能如下： 提供文件的共享（计算机程序 / 数据）； 支持间接使用远程计算机； 使用户不因各类主机文件存储器系统的差异而受影响；
React Native 开发环境搭建（全平台详解）
最新发布
zimin的专栏
06-09 1621
在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS 的模拟器或真机上运行应用，以及 Expo CLI 和 React Native CLI 的详细对比。此外，我们还将总结常见错误及其解决方案，帮助你顺利完成环境搭建。本文的目标是让无论是初学者还是有经验的开发者都能轻松上手 React Native 开发。
myftp开发文档
qq_43560037的博客
09-07 1677
myftp开发文档准备工具 本文针对myftp项目的各个功能做出详细概述。 准备工具 Xshell6，云服务器（虚拟机），leapftp（客户端交互开发），editplus（方便代码编辑与查看）
FTP上传文件提示550错误原因分析。
07-04 4828
今天测试FTP上传文件功能，同样的代码从自己的Demo移到正式的代码中，不能实现功能，并报 Stream rs = ftp.GetRequestStream()提示远程服务器返回错误: (550) 文件不可用(例如,未找到文件, 百度查找原因： 1.说文件权限； 2.路径是否正确； 3.路径是不是要加“@” 还有其他各类说法，逐一检查未发现错误，关键是同一个文件同样代码...
ftp上传文本、移动文件、删除文件
10-02
public class FTPUtil { private FTPClient ftpClient=null; private boolean result = false; private FileInputStream fis; String ftpHost = "10.16.111.111"; String port = 21 String ftpUserName = "ftpuser11; String ftpPassword = "1234561"; /** * 登录服务器 * @param ftpInfo * @return * @throws IOException */ public FTPClient login() throws IOException { ftpClient = new FTPClient(); ftpClient.connect(ftpHost); boolean login = ftpClient.login(ftpUserName,ftpPassword); int reply = ftpClient.getReplyCode(); if (!FTPReply.isPositiveCompletion(reply)) { ftpClient.disconnect(); } if(login){ System.out.println("ftp连接成功！"); }else{ System.out.println("ftp连接失败！"); } //ftpClient.setControlEncoding("GBK"); return ftpClient; } /** * 字符串作为文件上传指定目录 下 * @param content 源字符串 * @param uploadDir 上传目录 * @param ftpFileName 上传文件名称 * @throws Exception */ public void ftpUploadByText(String content ,String uploadDir,String ftpFileName) throws Exception{ try { ftpClient = this.login(); //创建目录 createDir(ftpClient,uploadDir); // 设置上传目录 这个也应该用配置文件读取 ftpClient.changeWorkingDirectory(uploadDir); ftpClient.setBufferSize(1024); ftpClient.setControlEncoding("GBK"); // 设置文件类型（二进制） ftpClient.setFileType(FTPClient.BINARY_FILE_TYPE); String fileName = new String(ftpFileName.getBytes("GBK"),"iso-8859-1"); OutputStream os = ftpClient.storeFileStream(fileName); byte[] bytes = content.getBytes(); os.write(bytes); os.flush(); os.close(); } catch (Exception e) { ftpClient.disconnect(); ftpClient = null; e.printStackTrace(); throw e; }finally{ ftpClient.disconnect(); ftpClient = null; } } /** * 移动文件 * @param ftpInfo * @return * @throws Exception */ public boolean moveFile(FTPInfo ftpInfo)throws Exception { boolean flag = false; try { ftpClient = this.login(); flag = this.moveFile(ftpClient, ftpInfo.getChangeWorkingDirectoryPath(), ftpInfo.getFilePath()); } catch (IOException e) { e.printStackTrace(); throw e; } finally { try { ftpClient.disconnect(); ftpClient = null; } catch (IOException e) { e.printStackTrace(); throw new RuntimeException("关闭FTP连接发生异常！", e); }catch (Exception e) { e.printStackTrace(); throw e; } } return flag; } /** * 删除文件 * @param ftpInfo * @return * @throws Exception */ public boolean deleteFile(FTPInfo ftpInfo)throws Exception { boolean flag = false; try { ftpClient = this.login(); flag = this.deleteByFolder(ftpClient, ftpInfo.getChangeWorkingDirectoryPath()); } catch (IOException e) { e.printStackTrace(); throw e; } finally { try { ftpClient.disconnect(); ftpClient = null; } catch (IOException e) { e.printStackTrace(); throw new RuntimeException("关闭FTP连接发生异常！", e); }catch (Exception e) { e.printStackTrace(); throw e; } } return flag; } /** * 实现文件的移动，这里做的是一个文件夹下的所有内容移动到新的文件， * 如果要做指定文件移动，加个判断判断文件名 * 如果不需要移动，只是需要文件重命名，可以使用ftp.rename(oleName,newName) * @param ftp * @param oldPath * @param newPath * @return */ public boolean moveFile(FTPClient ftp,String oldPath,String newPath){ boolean flag = false; try { ftp.changeWorkingDirectory(oldPath); ftp.enterLocalPassiveMode(); //获取文件数组 FTPFile[] files = ftp.listFiles(); //新文件夹不存在则创建 if(!ftp.changeWorkingDirectory(newPath)){ ftp.makeDirectory(newPath); } //回到原有工作目录 ftp.changeWorkingDirectory(oldPath); for (FTPFile file : files) { if(file.isDirectory()) { moveFile(ftp,oldPath+file.getName()+"/" ,newPath+file.getName()+"/"); }else{ //转存目录 flag = ftp.rename(oldPath+new String(file.getName().getBytes("GBK"),"ISO-8859-1"), newPath+"/"+new String(file.getName().getBytes("GBK"),"ISO-8859-1")); } if(flag){ System.out.println(file.getName()+"移动成功"); }else{ System.out.println(file.getName()+"移动失败"); } } ftp.removeDirectory(new String(oldPath.getBytes("GBK"),"ISO-8859-1")); } catch (Exception e) { e.printStackTrace(); System.out.println("移动文件失败"); } return flag; } /** * 删除FTP上指定文件夹下文件及其子文件方法，添加了对中文目录的支持 * @param ftp FTPClient对象 * @param FtpFolder 需要删除的文件夹 * @return */ public boolean deleteByFolder(FTPClient ftp,String FtpFolder){ boolean flag = false; try { ftp.changeWorkingDirectory(new String(FtpFolder.getBytes("GBK"),"ISO-8859-1")); ftp.enterLocalPassiveMode(); FTPFile[] files = ftp.listFiles(); for (FTPFile file : files) { //判断为文件则删除 if(file.isFile()){ ftp.deleteFile(FtpFolder+new String(file.getName().getBytes("GBK"),"ISO-8859-1")); } //判断是文件夹 if(file.isDirectory()){ String childPath = FtpFolder +file.getName()+ "/"; //递归删除子文件夹 deleteByFolder(ftp,childPath); } } //循环完成后删除文件夹 flag = ftp.removeDirectory(new String(FtpFolder.getBytes("GBK"),"ISO-8859-1")); if(flag){ System.out.println(FtpFolder+"文件夹删除成功"); }else{ System.out.println(FtpFolder+"文件夹删除成功"); } } catch (Exception e) { e.printStackTrace(); System.out.println("删除失败"); } return flag; } /** * 创建目录 * @param createpath * @param sftp */ public void createDir(FTPClient ftpClient,String createpath) throws Exception { try { if(ftpClient.changeWorkingDirectory(createpath)) { return; } String pathArry[] = createpath.split("/"); StringBuffer filePath = new StringBuffer("/"); for (String path : pathArry) { if (path.equals("")) { continue; } filePath.append(path + "/"); if(!ftpClient.changeWorkingDirectory(filePath.toString())) { ftpClient.makeDirectory(filePath.toString()); ftpClient.changeWorkingDirectory(filePath.toString()); } } ftpClient.changeWorkingDirectory(createpath); }catch (Exception e) { e.printStackTrace(); throw new Exception("创建路径错误：" + createpath); } } }
React Native环境搭建及配置问题
01-03
$ yarn add react-native@0.59.10 对应的 react版本为16.8.3 $ yarn add react@16.8.3 参考：https://github.com/react-native-community/discussions-and-proposals/issues/129 常见问题 问题1 Unable to load ...
React-Native环境搭建：Android真机调试（小米手机miui10系统）
wudith的专栏
01-21 1331
主要参考官网的步骤来进行安装，但官网介绍的和最新版本的RN还是有一些差异，总结了一些自己的心得体会。
ReactNative项目构建分析与思考之react-native-gradle-plugin
喻志强的博客
03-09 3558
用了这么久的React Native，你真的了解RN项目的构建流程吗?本文剖析了RN项目组织结构、Gradle插件的作用以及RN是如何组织项目的。通过一步步的分析,揭秘了RN项目构建背后的奥秘,为你提供了前所未有的透彻见解。无论你是Android开发者还是React Native爱好者,本文定能让你大开眼界,构建出更加优质的RN应用。快来一探RN构建流程的独门秘籍吧! Copy Retry
React Native 环境配置（mac）
Daxue_haha的博客
09-12 4670
React Native 环境配置（Mac）
react-native爬坑（2）————从源码配置部分开发命令
as36331233的博客
09-27 375
从去年11月开始到现在，使用ReactNative已经有近10个月了，从当初的RN小白，在实际开发的过程中踩了无数的坑，但还好大部分得到了完善的解决。目前负责公司的RN App跨端架构设计，同时沉淀了一些日常所需和自己优化过的组件，APP架构采用了拆分bundle包+热更新+android和ios兼容的模式。在公司2个APP上已稳定运行； 今天要讲的是在实际开发过程中在package.json配...
react-native运行ios报错总结
dengdengda的博客
12-08 9026
Cannot find entry file index.ios.js [index.android.js] in any of the roots网上一搜出现这个问题的人还挺多，解决方法就是： 项目路径下运行：npm start -- -reset-cache 再重新启动项目：react-native run-ios(run-android) 如果还是失败那么就在这里看看有没有解决方案NPM
vsftpd出现550 SITE CHMOD command failed.
时间是把杀刀猪
01-16 2951
centos 6（centos 7没遇到这个问题）   ftp 配置后，用sublime text修改文件保存时出如下问题   b'FTPSync [default] > Connected to: localhost:21 (timeout: 30) (key: cf1870902e065b11b67b92a95b960a3e)' b'FTPSync [default] &gt...
redhat linux 下FTP配置
蜗牛天堂
12-16 558
<br />3.2 VSFTP—安全与效能兼备的ftp 服务器 <br />3.2.1 VSFTP 概述 <br />FTP，file transfer protocol，这是档案传输的通讯协议，也是一般最常用来传送档案的方式。读者在使用RedHat9 的时候，可能会感受到ftp server 有一些改变：第一，就是ftp server 只剩下vsftp，原有的wuftp 等都没放入﹔第二，就是vsftp 从XINETD 中独立出来，并将设定档从/etc/vsftpd.conf 之中移到/etc
vsftpd默认值
The Big Data Way
11-22 1059
原文地址：http://vsftpd.beasts.org/vsftpd_conf.html 国内解释：http://hi.baidu.com/346430756/blog/item/5527e9363402652a0b55a9d0.html   VSFTPD.CONF Section: File Formats (5)Index Return to Main Contents...
FTP中主动模式(port)与被动模式(PASV) (转载)
code09的专栏
03-19 1300
基础 FTP是仅基于TCP的服务，不支持UDP。 与众不同的是FTP使用2个端口，一个数据端口和一个命令端口（也可叫做控制端口）。通常来说这两个端口是21－命令端口和20－数据端口。但当我们发现根据（FTP工作）方式的不同数据端口并不总是20时，混乱产生了。 主动FTP 主动方式的FTP是这样的：客户端从一个任意的非特权端口N（N>;1024）连接到FTP服务器的命令端口，也就是21端口。然后客户
React Native第一次运行报错 error Command failed: gradlew.bat app:installDebug
热门推荐
正义
03-21 1万+
按照官网上的步骤安装并运行第一个RN项目，没想到出现了下面的错误。 BUILD FAILED in 4m 4s 1 actionable task: 1 executed error Could not install the app on the device, read the error above for details. Make sure you have an Android emu...
怎么搭建react-native环境
05-16
搭建 React Native 环境需要以下步骤： 1. 安装 Node.js React Native 依赖 Node.js 运行环境，因此需要先安装 Node.js。你可以在官网上下载适合你操作系统的版本并安装。 2. 安装 React Native 命令行工具 在终端中运行以下命令安装 React Native 命令行工具： ``` npm install -g react-native-cli ``` 3. 安装 Java SE Development Kit 安装 Java SE Development Kit (JDK) 是因为 React Native 的一些依赖需要 Java。你可以在官网上下载适合你的操作系统的版本并安装。 4. 安装 Android Studio 安装 Android Studio 是因为 React Native 开发需要 Android 环境，Android Studio 提供了 Android 的开发工具和模拟器。你可以在官网上下载适合你操作系统的版本并安装。 5. 配置 Android SDK 在 Android Studio 中配置 Android SDK。打开 Android Studio，选择 "Configure" -> "SDK Manager"，在 "SDK Platforms" 标签页中选择相应的 Android 版本并安装，然后在 "SDK Tools" 标签页中安装 "Android SDK Build-Tools" 和 "Android SDK Platform-Tools"。 6. 配置环境变量 将以下路径添加到环境变量中： ``` ANDROID_HOME=<path to Android SDK> ``` 将 `<path to Android SDK>` 替换成你的 Android SDK 的路径。在 macOS 或 Linux 中，可以将以上命令添加到 `~/.bash_profile` 文件中。 7. 创建 React Native 项目 在终端中运行以下命令创建一个新的 React Native 项目： ``` react-native init <project name> ``` 将 `<project name>` 替换成你的项目名称。等待一段时间，直到项目创建完成。 8. 运行 React Native 项目 进入项目目录，运行以下命令启动项目： ``` cd <project name> react-native run-android ``` React Native 将会自动编译和安装应用程序到模拟器或连接的设备中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值