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

最新推荐文章于 2025-06-09 17:58:20 发布
最新推荐文章于 2025-06-09 17:58:20 发布
阅读量2.9k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： RN android ios 文章标签： react-native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011154205/article/details/79820860
本文分享了React Native开发环境的搭建过程及解决多种常见问题的经验，包括环境搭建时的各种坑、模拟器启动失败的解决办法以及红屏问题的处理方案。

最近打算入门学习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以后会强大起来写原生的就要下岗了。我觉得近两三年还不至于。两三年之后会不会有什么概念性的产品出来还是未知呢。就像当年虽也没想到诺基亚和他的塞班会被淘汰一样。几年之后会不会有更先进的东西来推翻苹果和安卓也说不定。

UltraEdit的FTP远程访问linux文件时550 RETR命令失败
Joy58061678的专栏
05-07 7191
在遇到问题之前，先确定Linux上的vsftpd有没有开启中 > netstat -antp | grep vsftpd在确定开启之后，再确定下防火墙下面的允许运行的端口中有没有勾选ftp。 错误1： RETR命令失败 550 Failed to open file. 查看日志，发现权限已开，就是打不开。 解决方法 ： 把帐号里的协议：ftp改成s
React-native开发环境搭建(Windows平台)
weixin_39065287的博客
11-01 1621
React-native开发环境搭建Windows平台
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=/ 即可
React Native 开发环境搭建（全平台详解）
最新发布
zimin的专栏
06-09 1675
在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS 的模拟器或真机上运行应用，以及 Expo CLI 和 React Native CLI 的详细对比。此外，我们还将总结常见错误及其解决方案，帮助你顺利完成环境搭建。本文的目标是让无论是初学者还是有经验的开发者都能轻松上手 React Native 开发。
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); } } }
linux ftp服务器550错误,ftp error 550轻松解决ftp引导yum源并发性错误
weixin_27024175的博客
05-04 3971
我在配置openstack的服务虚拟主机前期，最小化服务器(base)制作本地yum时，出了一些小问题[Errno 14]和[Errno 256]。关于errno我想注明一下：内核代码中的/usr/include/asm-generic/errno.h及errno-base.h 可以查看相关错误记录信息(参考的是内核版本2.6)。errno不单单只是error， 是记录系统的最后一次错误； 代码是...
React Native开发环境搭建
m0_56344834的博客
11-02 2918
React是一个构建用户界面的JS框架，实现了数据的响应式和组件化开发，本身既可以用于Web网站项目，也可以用于创建移动端App项目。相较于Vue.js在移动端只能构建WebApp，React生态系统中有一个可以构建“真正原生App”的扩展 —— React Native，可以这样说：“RN是React生态圈可以傲视其它对手的绝对功臣”。
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 1357
主要参考官网的步骤来进行安装，但官网介绍的和最新版本的RN还是有一些差异，总结了一些自己的心得体会。
ReactNative项目构建分析与思考之react-native-gradle-plugin
喻志强的博客
03-09 3621
用了这么久的React Native，你真的了解RN项目的构建流程吗?本文剖析了RN项目组织结构、Gradle插件的作用以及RN是如何组织项目的。通过一步步的分析,揭秘了RN项目构建背后的奥秘,为你提供了前所未有的透彻见解。无论你是Android开发者还是React Native爱好者,本文定能让你大开眼界,构建出更加优质的RN应用。快来一探RN构建流程的独门秘籍吧! Copy Retry
FTP命令大全
03-19 1804
文件传输软件的使用格式为：FTP，若连 接成功，系统将提示用户输入用户名及口令：LOGIN： (输入合法的用户名或者“ANONMOUS”)：PASSWORD： (输入合法的口令，若以“ANONMOUS”方式登录，一般不用口令)：第一节 FTP命令基础进入想要连接的FTP站点后，用户就可以进行相应的文件传输操
react native 运行报错：Error: Command failed: gradlew.bat installDebug
WarmPure
06-12 9181
今天在运行以前的一个RN项目的时候（android）， 莫名的报错无法运行，错误信息：Error: Command failed: gradlew.bat installDebug 看大家的解决方式多为两种：1. 添加local.properties文件，里面设置sdk的路径；2.是在android下执行gradlew clean,尝试无效之后留意到错误信息： Unzipping C:\Us...
Ftp 各种命令以及返回状态码说明
热门推荐
Younge的专栏
02-14 3万+
Ftp 各种命令说明以及返回状态码说明
在React Native项目中解决常见错误
2301_79777620的博客
04-27 1056
中添加以下内容："devDependencies": { "@react-native-community/cli": "latest" }解决方案：使用新命令npx @react-native-community/cli init YourProjectName。（3）完成安装后，再次运行以下命令来启动开发服务器：npx react-native start。（1）验证当前的项目是否是 React Native 项目：进入要运行的目录下，执行dir。发现报如图所示的错误。
FTP：文件传输协议(指令及响应代码)
蓝色幻想
07-23 1万+
文件传输协议（FTP）使得主机间可以共享文件。 FTP 使用 TCP 生成一个虚拟连接用于控制信息，然后再生成一个单独的 TCP 连接用于数据传输。控制连接使用类似 TELNET 协议在主机间交换命令和消息。　　FTP 的主要功能如下： 提供文件的共享（计算机程序 / 数据）； 支持间接使用远程计算机； 使用户不因各类主机文件存储器系统的差异而受影响；
Linux系统安装vsftpd服务器，出现550问题解决
m0_57034884的博客
10-24 3290
在设置匿名用户上传权限，当用vsftpd上传文件是，会出现550错误，下面是我的错误例子: 当时出现问题，我也是很头痛，查了资料才知道，vsftpd服务器出现550是权限不足的原因 这是我修改前的 这里显示我只有进入权限，所以别提什么上传文件了，所以要修改权限 输入命令:vim /etc/vsftpd/vsftpd.conf(或者 vi /etc/vsftpd/vsftpd.conf)进入 输入i，进行修改下面的，把#去掉，打开权限 退出，按esc，:，wq保存退出 打开权限后如下
myftp开发文档
qq_43560037的博客
09-07 1679
myftp开发文档准备工具 本文针对myftp项目的各个功能做出详细概述。 准备工具 Xshell6，云服务器（虚拟机），leapftp（客户端交互开发），editplus（方便代码编辑与查看）
FTP上传文件提示550错误原因分析。
07-04 4835
今天测试FTP上传文件功能，同样的代码从自己的Demo移到正式的代码中，不能实现功能，并报 Stream rs = ftp.GetRequestStream()提示远程服务器返回错误: (550) 文件不可用(例如,未找到文件, 百度查找原因： 1.说文件权限； 2.路径是否正确； 3.路径是不是要加“@” 还有其他各类说法，逐一检查未发现错误，关键是同一个文件同样代码...
怎么搭建react-native环境
05-16
搭建 React Native 环境需要以下步骤： 1. 安装 Node.js React Native 依赖 Node.js 运行环境，因此需要先安装 Node.js。你可以在官网上下载适合你操作系统的版本并安装。 2. 安装 React Native 命令行工具 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值