React Native 开发系列第一篇（1）—— 创建一个app，并使用Andoird开启

React Native 开发系列第一篇（1）------ 创建一个app，并使用Andoird开启

创建项目

创建一个新的 RN 项目（不融入其他原生项目）并使用 Android 启动

1. 运行创建命令

官方提到的创建项目命令是这个：

npx react-native@[version] init [projectName]

这是命令的模板。实际上我是直接使用了最新版（直接使用下面的命令）。

npx react-native@latest init myRNproject

然后会出现下面这样的 log

:interrobang: 遇到的第一个问题------ Cocopodss 是什么？​

参考链接：cocoapods（一）------ 简介，环境配置，使用 - 掘金 (juejin.cn)

简单说：cocoapods是为iOS程序提供依赖管理，管理第三方依赖库的工具。解决库与库之间的依赖关系，下载库的源码，并通过创建一个xcode的workspace来将这些第三方库与我们的工程连接起来，方便开发使用。

用我的话说就是 "类 npm /类 pip /类 mvn"。那么我们先简单这么理解，具体的工具细节后续了解 快速学会使用 cocoapods 帮助开发 。

各位可以根据自己想做的东西来选择是否要用。这里我就选择使用了，先用为敬。

2. 下载 Ruby Gems。（这一步骤需要一点时间，应该是第一次创建项目会有，再次创建时电脑有了环境应该就不会走安装的步骤了。）

:interrobang: 什么是 Ruby Gems ?

参考链接：深入理解RubyGems、Bundler、CocoaPods的执行过程 - 掘金 (juejin.cn)

RubyGems、Bundler、CocoaPods 都是 Ruby 语言开发的工具。

在大多数 iOS 项目中，都会使用 CocoaPods 作为三方库的包管理工具，某些项目还会使用 Bundler 来约束 CocoaPods 的版本、管理 CocoaPods 的插件等，而 CocoaPods 和 Bundler 作为 Gem 包，通常会使用 RubyGems 来安装和管理。

:bangbang: 注意这里提到了 React-Native 官网说到的一个注意事项：

看来 RN 还和 Ruby 语言有关系。将来调试的时候不要忘了这个获取会给我带来什么。至于 Ruby 语言，我们暂时就先选择不学习。先干再说。

---

插入一下

第一次安装这个环境我是安装失败了的。但是并不影响后续的步骤。下面是错误的截图：

后续步骤是正常运行的：

:bookmark: 第一条 info 提示的信息告诉我们可以在react-native.config.js文件中配置 automaticPodsInstallation 字段可以在构建 iOS应用 的时候让 CoCoapods 自动去安装依赖。算是个冷知识。先记着。

后面的三个Run对应这运行项目的命令，正好也是对应了官方文档描述的。

前提：已经安装好了虚拟机或者连接好了真机。

3. 运行 yarn android 或者 npx react-native run-android 来启动安卓应用。如果是要启动 IOS 应用则是对应 yarn ios 和 npx react-native run-ios 。

其中，yarn 命令其实就是对应了 package.json 中的命令，并不是 yarn 自己独有这个 flag 。相应的，我们还可以尝试使用 npm、pnpm 来尝试启动。

:bangbang: 需要注意的是，不要使用 cnpm 来启动。这是文档中给出的重要提示。

原因可能是 cnpm 安装依赖后的 node_model 在 RN 解析时会产生不适配的问题。个人没有深究，我非常听劝。

:bookmark: 补充一下

第一次启动 Android 的时候会需要去下载 Gradle 的包。如果发现下载失败报错，如下图所示，那么可以选择 1️⃣ 科学上网 2️⃣ 手动去下载，并放到一个有缘的目录，让它们去偶遇 。怎么做请参考 . . . . . .（暂时还没写，因为我可以下载，先百度吧，后续更新）。（学习过 Android 开发的小伙伴可能就直接选择第二种了。）

这里我注意到它并没有退出命令的执行，也就是说我们继续在键盘上选择 启动时提示的四个指令 i、a、d、r。

然后启动成功是这样的：

正如这里提示的，在项目启动后我们可以通过

：这就完了吗？那我为什么要用RN开发移动应用？当然是iOS也要启动啦！

iOS 启动

使用命令

yarn ios

// 我个人也尝试了一下使用了下面这个命令启动：
npx yarn ios

但是我遇到了报错

整个的过程是：

1、执行 npx yarn ios

2、弹出一个命令框，是 metro 的命令窗口，然后输入 i 以选择启动ios

3、ios的虚拟机正常启动，但是没看到app的页面

4、发现 Metro 命令窗口中已经出现了上述的报错。

根据错误描述去寻找这个文件，结果也确实是没有找到的。那么，我们经验少就得去问一问了。

这个报错让我有点蒙------这个目录不是脚手架创建的吗？我还没动呢？怎么就运行不起来？ios我之前有什么误操作吗？实际上是我多想了。在遇到这个问题的时候直接去查。只要自己确定没有安装其他的有关watchman、node、cocoapods的东西，就不要立刻怀疑自己。

在GitHub上我看到了相同问题的前辈，以及大佬们的标准答案：链接------npx react-native run-ios results to error: Unable to load contents of file list: '/Target Support Files/Pods-<>...' · Issue #36189 · facebook/react-native (github.com)

按这个说法就是，首先我们要更新一下 cocoapods

sudo gem update cocoapods --pre

然后进入到 RN 项目的 ios 目录中，执行

# 访问 ios 目录
cd ios

# 更新依赖
pod update

很明显这里就是 IOS 应用的项目目录，后续使用 xcode 打包 RN 项目形成 ios 上的应用肯定是基于这个模板来打包创建的。

这里的更新会产生文件

最后重新运行

yarn ios

---

对于网络慢会出现的更新失败的问题

[!] Error installing Flipper-Boost-iOSX
[!] /opt/homebrew/bin/git clone https://github.com/priteshrnandgaonkar/Flipper-Boost-iOSX.git /var/folders/m4/1dgjsq453_59mjnldxvm31lc0000gn/T/d20240303-99094-23ex80 --template= --single-branch --depth 1 --branch 1.76.0.1.11

正克隆到 '/var/folders/m4/1dgjsq453_59mjnldxvm31lc0000gn/T/d20240303-99094-23ex80'...
错误：RPC 失败。curl 92 HTTP/2 stream 5 was not closed cleanly: CANCEL (err 8)
错误：预期仍然需要 3211 个字节的正文
fetch-pack: unexpected disconnect while reading sideband packet
致命错误：过早的文件结束符（EOF）
致命错误：fetch-pack：无效的 index-pack 输出

这个问题我查询了一下，主要的原因是，我的梯子网络太慢导致的 。。。

那怎么办，换个梯子？一顿尝试后我发现另一个梯子也不行。

然后我参考了以下几个链接：

1. git - error: RPC failed; curl transfer closed with outstanding read data remaining - Stack Overflow
2. git clone报错RPC failed； curl 92 HTTP/2 stream 5 was not closed cleanly: CANCEL (err 8)_rpc failed; curl 92 http/2 stream 5 was not closed-CSDN博客
3. clone github项目时报错：error: RPC failed； curl 92 HTTP/2 stream 5 was not closed cleanly: CANCEL (err 8)-CSDN博客

总的来说呢，可能的原因有两个：1️⃣仓库太大，梯子网速慢，导致失败了；2️⃣git 的缓冲区设置的太小了。

1) 关于第一种情况------网慢

解决方式有俩。

1. 给git设置http代理(注意代理地址是视个人的情况而定)

# 开启代理
git config --global http.proxy http://127.0.0.1:7890s
git config --global https.proxy http://127.0.0.1:7890

# 查看代理配置
git config --global --get http.proxy
git config --global --get https.proxy

# 关闭代理
git config --global --unset http.proxy
git config --global --unset https.proxy

# 个人推荐记得关闭代理不然下次没开启代理的时候克隆仓库你会很疑惑

2. git clone 的时候添加参数 --depth 1进行浅层克隆，然后进入项目后进行，例如：

git clone http://github.com/large-repository --depth 1
cd large-repository
git fetch --unshallow

但个人认为我这次遇到的和这个没有关系，因为报错中也显示我使用了这个参数，所以我根本没有尝试这个方法。

2) 关于第二种情况 ------ git 的缓冲区设置的太小

解决方式简单粗暴，就是增大缓冲区大小。git 默认是没有的

git config --global http.postBuffer 524288000

查看命令： git config --global --get http.postBuffer

同理，去除这个配置只需要：git config --global unset http.postBuffer
我是采用了第二个方法成功的。需要多尝试，因为我的梯子不稳定，所以执行了好多次 pod update 。但是每次执行都能进一步我就先忍了。

据我观察，会出现这个问题的仓库基本上是和 Flipper 有关的。

希望这篇文章能帮助大家解决一些问题。欢迎随时交流。