React Native无框架开发环境搭建（）

前言

现在官网主推的是Expo框架进行开发，但是expo集成原生插件比较麻烦。

公司用的app大多都会集成一些各种各样的第三方原生sdk（比如广告、支付类）或其它一些原生功能，这种情况下 推荐用无框架环境进行开发。

如果Expo官方提供的原生插件功能满足项目需求，还是推荐用Expo框架进行开发的。

吐槽

现在React Native的环境是真的繁琐且踩坑，网络环境差一些的估计要搭建的心态爆炸。一个无框架初始化app安装完各种依赖能跑起来的项目大小大概是570M，前端项目总是被各种npm包空间占用的真难受，空间根本顶不住，而隔壁Flutter跟着官网教程走，用vscode搭建一个初始化项目只需要几分钟，且项目大小是80M左右。

环境搭建

下面以0.74版本为例，还是跟着官方文档来。

Macos环境

1、为了避免一些不必要的错误，一定保证访问到的完整 ReactNative 目录是英文路径，例如：/Users/test/ReactNative/myApp

2、使用项目下的 项目.xcworkspace 打开 xcode 运行到 iphone

3、保证 cocoapods依赖安装没有报错

cocoapods 可以用homebrew或ruby安装(都是macos自带)，由于macos自带的ruby版本一般都比较低(cocoapods 1.15.2依赖于ruby3.3.4版本)，这里推荐用homebrew来安装。

大概需要cocoapods、watchman、node环境，再就是 下载xcode 选择合适自己系统的版本。

前置步骤：

# 安装cocoapods
brew install cocoapods

# watchman
brew install watchman

无框架项目构建：

# 如果您之前安装了全局的`react-native-cli`软件包，请将其删除，因为它可能会导致意外问题：
npm uninstall -g react-native-cli @react-native-community/cli

开始踩坑：

1. 官方初始化项目命令

我的本地环境为node20，现在最新的cli版本是v14.0.0

如果使用官方文档社区cli命令：

# 如果使用yarn
npx @react-native-community/cli@14.1.0 init myApp --pm yarn --package-name com.myapp.test --install-pods true

# 运行到ios模拟器
yarn ios --simulator="iPhone 16 Pro"

如果运行 yarn ios 提示 Failed to build ios project. "xcodebuild" exited with error code '70'，是因为没有找到模拟器，需要加参数 yarn ios --simulator="iPhone 16 Pro"，或者手动运行xcode选择模拟器或手机运行

测试后有效命令如下，需要注意如果同时安装了npm和yarn，cli会使用yarn安装依赖，我本地的yarn版本是v1，然后cli在安装依赖的过程中会设置yarn版本为v3，后面就会提示yarn-error。解决办法是命令后面加--pm npm的参数，然后就会使用npm安装了。

安装过程是漫长的，还需要翻墙！

cli安装React Native文档

npx react-native@latest init ProjectName

# 如果使用npm安装
npx react-native@latest init ProjectName --pm npm

# 运行到模拟器
npx react-native run-ios --simulator=\"iPhone 16 Pro\" --mode Debug

2. 安装bundle和pod依赖

上面初始化模板下载完以后，如果选择了不安装cocoapods，那么项目现在还是运行不了的，需要下面命令，继续安装依赖。

安装过程是漫长的，还需要翻墙！！！

# 1. 如果您在使用 iOS 时遇到问题，请尝试运行以下命令来重新安装依赖项：
cd ios

# 2. 安装bundle
bundle install

# 3. 安装pod依赖
bundle exec pod install

3. 打开xcode

注意：打开ios文件夹内.xcworkspace的后缀文件，修改签名，然后运行到模拟器或真机

如果是打开的.xcodeproj，那么还可能会提示各种运行错误，貌似大多都是pod引起的，可以尝试下面命令

pod deintegrate

pod update

4. 启动开发服务

# 启动服务
npm run start

如果没有运行到手机或模拟器上，可以选择i命令 运行到ios，或者自己用xcode运行到手机或模拟器上。

如果是运行到iphone手机上 还有要注意的点，当修改App.tsx内的代码后，发现手机上不会同步更新，这个时候可能是因为没有开启本地网络。

吐槽：在这个问题上尝试过好多次重复的上面步骤，总怕遗漏了什么步骤或哪个包没有安装正确，不论怎么设置app内的Configure Bundler都无效，后来无意中点击app内的链接，提示没有网络权限，然后把app的本地网络打开后，才可以正常本地开发、更新。