React Native初次使用遇到的问题

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

前提：距离上次写博文已经过去了5年之久，诸多原因导致的，写一篇优质博文确实费时费力，中间有其他更感兴趣的事要做（打游戏、旅游、逛街、看电影、剪辑等），再加上总是感觉属于自己的时间很少，所以一有时间就去做自己想做的事了。不管怎么说，本质还是松懈和懒惰的问题。再次“提笔重写”，一是因为目前处于离职状态，时间充裕，二是最近刚开始学 React Native，想以初学者的心态记录一下刚上手遇到的一些问题。

• 本人学习入口：
  • React Native 官方英文文档：Get Started with React Native
  • Expo 官方英文文档： Get started creating apps with Expo
• 根据官网教程，使用官方推荐的 React Native 框架 Expo 进行初次上手体验，直接从创建一个全新的 RN 项目开始。

# 使用 Expo 启动一个新的 React Native 项目（命令行直接执行即可）
npx create-expo-app@latest

• 问题会持续更新…

1、npx create-expo-app@latest 命令执行报错1

问题： request to xxx failed, reason: certificate has expired （镜像请求失败，证书已过期）
生词：
certificate 英[səˈtɪfɪkeɪt] n.证书
问题定位：
npx create-expo-app@latest 命令执行时的版本信息：

• node ：16.15.0
• npm：8.5.5
  
  解决方法：
  在百度根据关键词 certificate has expired 检索的答案，或者用这个关键词： 关于npm安装淘宝镜像证书过期问题

#取消ssl验证（设置后，问题解决了）
npm config set strict-ssl false

2、npx create-expo-app@latest 命令执行报错2

问题：Unsupported engine，提示 node 版本过低，也是执行 npx create-expo-app@latest 命令时遇到的报错。

问题分析：应该安装哪个版本的 node？根据上图提示，只要版本>=18.13.0 都可以？

传送门：Expo 官方文档 - Learn how to create a new Expo project.

问题定位： 显而易见，首先需要 LTS 版本的 node。然后就涉及到多版本 node 的管理问题，直接百度搜索关键词：mac node 版本管理，给出的答案：可以使用 nvm（‌Node Version Manager）‌来轻松切换和安装多个Node.js版本。

解决：升级并使用 LTS 的 node 版本，然后重新运行创建工程的命令。

然后在百度搜一下 nvm 的用法（注：电脑之前已经安装了 nvm），只需要安装一下最新稳定版的 node 即可（没有的 nvm话，需要自行安装）。
做法：直接执行安装命令 nvm install --lts（安装完成后，当前使用的 node 版本会自动切换到已安装版本，无需再执行 nvm use <version> 命令进行手动切换）。

基本用法：

# 查看 nvm 版本
nvm -v
# 当不知道 nvm 命令用法时
nvm --help 
# 查看已安装的 node 版本
nvm ls
# 安装指定版本的 node
nvm install <version>
# 卸载指定版本的 node
nvm uninstall <version>
# 切换 node 版本
nvm use <version>
# 查看当前激活的 node 版本
nvm current

常用命令的说明样例：

Example:nvm install 8.0.0                     Install a specific version numbernvm use 8.0                           Use the latest available 8.0.x releasenvm run 6.10.3 app.js                 Run app.js using node 6.10.3nvm exec 4.8.3 node app.js            Run `node app.js` with the PATH pointing to node 4.8.3nvm alias default 8.1.0               Set default node version on a shellnvm alias default node                Always default to the latest available node version on a shellnvm install node                      Install the latest available versionnvm use node                          Use the latest versionnvm install --lts                     Install the latest LTS versionnvm use --lts                         Use the latest LTS version

注：一开始用下面这个命令，就是因为不知道怎么安装最新 LTS 版本的 node，想的是分两步操作：先找到对应版本，然后再安装。

# 列出可供安装的远程版本，从列表中找到 最新的 LTS 版本（不建议）
nvm ls-remote

# 然后安装最新的 LTS 版本的 node
nvm install 20.16.0
# 当时其实完全可以用下面这个命令代替【强烈建议】
nvm install --lts

注：本来新版 node 安装完成后，不需要手动执行下面2行命令进行版本切换（因为一开始并不知道安装完以后，node 版本会自动切换）

至此，node 版本切换成功，安装报错的问题解决。

注意： 该问题也是后面多开命令行窗口才发现的，nvm use 命令只能用于临时切换到指定的 node 版本，‌切换只在当前窗口生效，‌关闭窗口后切换失效。‌

# 永久切换：切换后的 node 版本在所有窗口中都生效。
# 这样设置后，‌每次启动新的 shell 时都会默认使用这个版本。‌
nvm alias default <version>

3、npx expo start 命令启动本地开发服务器时报错

问题：报错信息TypeError: Invalid character in header content ["X-React-Native-Project-Root"]，百度了一下，说是路径中包含中文导致的。

首先说一下为什么会遇到这个问题？因为我在配置环境时，选择的开发方式是 Expo Go（如下图所示，但限制就是必须要下载该软件），为什么选它？根据文中的介绍，想快速试用体验一下 Expo（Expo Go 是一个非常适合快速测试 Expo 的沙盒，但不适用于长期项目，在【没有自定义原生模块】的受限沙盒中尝试应用开发）。

Expo Go 的缺点：安卓要从 Google Play Store(谷歌应用商店) 下载，iOS 需要从 App Store 下载，国内的网络环境肯定无法直接下载，要通过其他方式绕过限制进行下载，稍微麻烦一些。经过一番折腾，最终是下载下来了，用起来还挺方便。

另外一种开发方式（开发构建自己的 app）后续再尝试一下。
它的特点：

• 使用开发者工具构建自己的 app
• 支持自定义原生模块
• 适用于生产项目

传送门：Expo Docs-Set up your environment

问题定位：果不其然，有个文件夹的名称是中文，xxx前端。以后还是项目尽量不要放在中文命名的子目录下。

解决方法：换个文件夹，重新执行一遍创建项目的过程，问题解决了。

Expo Go 软件使用截图：