iOS现有项目采用混合工程方式集成RN0.77.3版本

采用脚本的方式实现自动化集成RN0.77.3 环境的安装

在RN框架集成中，官方的给的方案是以一种纯RN工程的方式去集成RN模块，需要将现有项目包含在RN项目下，这种方式对我们现有项目的架构的破坏性太强，显然不适合我们当前需要的集成方式；

我们希望将RN模块以一种插件的方式或者子模块的方式去集成，并将我们的RN工程剥离为一个单独的仓库上传到git，这样后续不会去破坏原生团队的开发模式，原生开发方式不变，RN团队只需要在RN模块开发提交代码即可，与原生不冲突；

当前项目结构为，安卓项目，iOS项目，RN项目采用并列平行的结构方式如下：

当前本地环境：

node版本 ：18.20.8

react:  18.3.1

react-native: 0.77.3

cocoapods: 1.16.2

Xcode: 16.4

集成：

1.首先在原生iOS项目同级目录下新建rn项目文件夹，假设当前iOS项目文件名为 ios

2.在rn项目文件内新建 package.json 文件，该文件为RN配置文件，可配置RN版本和依赖项，文件内容为：

package.json

{
  "name": "rn项目名",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "18.3.1",
    "react-native": "0.77.3"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.1",
    "@react-native-community/cli-platform-android": "15.0.1",
    "@react-native-community/cli-platform-ios": "15.0.1",
    "@react-native/babel-preset": "0.77.3",
    "@react-native/eslint-config": "0.77.3",
    "@react-native/metro-config": "0.77.3",
    "@react-native/typescript-config": "0.77.3",
    "@types/jest": "^29.5.13",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

3.在当前目录下运行 npm install 或者 yarn install 来安装我们的 node_modules (RN的依赖都会下载到此处)，该命令会自动生成依赖锁止文件（此步骤可忽略，参考第4步，由于采用混合工程方式集成后续需要使用脚本方式去修改安装文件路径，现已采用脚本方式实现自动化下载安装）

重点第4步：该步骤使用脚本实现自动化 yarn install 或者npm install 以及自动更改react_native_pods.rb脚本中的 ../node_modules 路径，混合工程模式自定义存放node_modules文件导致pod isntall时找不到react_native_pods.rb 脚本的关键原因所在，所以需要去修改该脚本中的路径到自己自定义的路径下

使用时，该文件在Podfile文件中指定路径，RN工程下只需要一个 package.json 文件就好，不需要手动去npm install，剩下直接 pod install 即可，即可自动下载node_modules 如果已经手动下载，该脚本也不会重复下载

4.由于采用混合工程方式集成需要我门重新指向node_modules在系统的安装脚本的中的路径，需要手动去修改，现使用脚本的方式实现自动修改，在iOS项目根目录下新建一个 Podfile_Link_ReactNative.rb 的ruby脚本（与Podfile文件在同一目录下即可，也可自由放置，只需在Pofile中指定文件路径即可），该脚本的作用是 当我们在pod install时，自动去修改 

node_modules/react-native/scripts/react_native_pods.rb 中的 node_modules路径，react_native_pods.rb原路径为纯RN项目配置的路径为与iOS项目根目录，在podfile文件的上层目录，但当前采用混合工程模式，所以需要修改当前的node_modules模块路径，另一个作用的是检测当我们的RN工程模块未安装下载node_modules时，去自动 npm install 或者 yarn install 下载我们的 node_modules 模块和 package-lock.json 或者 yarn.lock，该脚本内容如下：

Podfile_Link_ReactNative.rb

# 在 Podfile文件中link RNSDK
def linkReactNativeSdk()
  
    # 设置 react_native_pods.rb 文件路径
    node_mudle_pod_file = "../rn项目名/node_modules/react-native/scripts/react_native_pods.rb"
  
    # 判断该文件是否存在，如果已经存在，表示RN环境已经配置，如果没有存在表示RN环境还未集成到项目
    if File.exist?(node_mudle_pod_file)
        Pod::UI.puts "\nReactNative 环境已存在！\n\n"
         
        content = File.read(node_mudle_pod_file)
        # 检查是否已经替换过（避免重复替换）
        unless content.include?("../rn项目名/node_modules")
            puts "文件 '#{node_mudle_pod_file}' 未包含目标路径，需替换"
            # 修改路径
             changePath(node_mudle_pod_file)
        end
         
    else
        Pod::UI.puts "ReactNative 环境不存在，准备下载···"
        # 判断是否安装 node环境
        if system "node -v > /dev/null"
            # 切换目录到../rn项目名/
            if Dir.chdir("../rn项目名/")
                # 使用 yarn 或 npm 下载依赖
                if system "yarn install || npm install"
                    Pod::UI.puts "ReactNative 环境安装成功！\n\n"
                    #因为当前为将node_modules安装到rn目录下，工作目录已经切换到了 ../rn项目名/ 所以需要切换回到 当前脚本所在的目录再执行上述node_mudle_pod_file位置才能被找到，试过直接当前指定现有目录，发现无效，报错找不对应文件，待优化？？？
                    Dir.chdir("../ios项目/") # Podfile文件所在目录
                    working_dir = Dir.pwd
                    puts "当前工作目录：#{working_dir}"  # 用来检测目录位置对不对的log
                    # 修改路径
                    changePath(node_mudle_pod_file)
                else
                    Pod::UI.puts "ReactNative 环境安装失败！请安装yarn，在命令行执行：npm install -g yarn"
                    Kernel.exit(false)
                end
            else
                Pod::UI.puts "不存在 rn项目名 文件夹"
                Kernel.exit(false)
            end
        else
            #如果没有安装，提示自行安装node环境
            Pod::UI.puts "环境下载失败！请先安装node环境，详细见：https://reactnative.cn/docs/environment-setup"
            Kernel.exit(false)
        end
    end
end
  
# 这个函数将 react_native_pods.rb 文件中 ../node_modules 路径改为当前node_modules路径 ../rn项目名/node_modules
def changePath(node_mudle_pod_file)
    configString = ""
    File.open(node_mudle_pod_file, "r+") {|f|
        configString = f.read.gsub(/..\/node_modules/,"../rn项目名/node_modules")
    }
    File.open(node_mudle_pod_file,"w"){|f|
        f.write configString
    }
end

5.在Podfile文件中去指定该脚本的位置，已经配置RN集成的位置和引用路径，具体如下：

Podfile

platform :ios, '15.1' # 由于RN0.77.3 版本最低支持iOS15.1 所以手动配置
 
# platform :ios, min_ios_version_supported  # 也可以使用 platform :ios, min_ios_version_supported 去自动配置 使用此方法要注意一定要写下面的 prepare_react_native_project！使配置生效
# prepare_react_native_project!
 
require_relative './Podfile_Link_ReactNative'  #引入Podfile_Link_ReactNative脚本，该脚本与当前Podfile文件在同一级
linkReactNativeSdk()    #执行脚本中的 linkReactNativeSdk 方法
require_relative '../rn项目名/node_modules/react-native/scripts/react_native_pods'    # 引入react_native_pods.rb脚本位置，注意这里只能写到 react_native_pods 不能写 react_native_pods.rb
require_relative '../rn项目名/node_modules/@react-native-community/cli-platform-ios/native_modules'     # 由于使用Hermes引擎参数需要用到@react-native-community，所以此处需要引用
 
target 'iOS项目名' do
   # 此时调用 use_react_native！ 用来配置RN的相对路径以及RN项目的根目录app_path，和hermes引擎是否启用配置，RN0.77.3是默认自动启用的  注意 :app_path => 一定要写，不然 pod install 运行会报错
   use_react_native!(:path => "../rn项目名/node_modules/react-native", :app_path => "../rn项目名", :hermes_enabled => true)
    
  target 'iOS项目名Tests' do
    inherit! :search_paths
    # Pods for testing
  end
 
  target 'iOS项目名UITests' do
    # Pods for testing
  end
 
end
 
post_install do |installer|
    react_native_post_install(installer) 
end

6.至此只需要运行 pod install 即可完成 RN 0.77.3 版本的集成

该方案参考：https://blog.csdn.net/ljmios/article/details/119451577