iOS通过Pod快速集成ReactNative环境

GarrettGao
2,965 阅读7分钟

因为我们项目近期接入RN，目前接入的版本是 ReactNaitve 0.63版本，在接入过程中，发现RN的项目结构是 RN工程包含 iOS 和 Android工程的目录。

但是我们对RN的引入为模块化引入，而非全项目。这样的目录结构可能对git管理或者现用工程目录管理都是一个问题。由此考虑能不能直接在iOS的现有项目目录下直接集成RN。

看了一下网上上很多人的方式是直接将现用项目 Copy 一份到 RN工程下的 iOS目录，如果项目人员多的话，不一定每个人能很好的操作，所以产生一个想法： 在iOS现有工程执行 pod install的时候，自动快速集成ReactNative环境。

关于RN的环境安装

这里不做太多陈述，官网说的一的非常详细：中文安装文档；

总结就是需要安装 node 环境，和一些辅助插件工具。

目录结构分析

首先我们创建空的RN项目查看RN项目的默认目录和引用设置。

react-native init <项目名称>

如： react-native init RNTest，这个过程会等待一段时间，执行成功后我们查看目录：

RNTest
├── App.js
├── __tests__
├── android
├── app.json
├── babel.config.js
├── index.js
├── ios
├── metro.config.js
├── node_modules
├── package.json
└── yarn.lock

可以发现 node所有的依赖配置为 package.json文件控制，依赖全部下载在 node_modules目录下，我们打开默认自带的iOS工程，查看Podfile文件的RN pod依赖配置：

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '10.0'

target 'RNTest' do
  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])

  target 'RNTestTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  use_flipper!
  post_install do |installer|
    flipper_post_install(installer)
  end
end

target 'RNTest-tvOS' do
  # Pods for RNTest-tvOS

  target 'RNTest-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end
end

首先可以看到， ReactNative 0.63版本支持的iOS最低系统版本为 iOS 10.0。

依赖了两个文件：

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

其他通过 pod path的方式依赖的本地资源：

config = use_native_modules!
use_react_native!(:path => config["reactNativePath"])

我们查看一些 node_modules/react-native/scripts/react_native_pods的这个文，如下：

# Copyright (c) Facebook, Inc. and its affiliates.
#
# This source code is licensed under the MIT license found in the
# LICENSE file in the root directory of this source tree.

def use_react_native! (options={})
  # The prefix to the react-native
  prefix = options[:path] ||= "../node_modules/react-native"

  # Include Fabric dependencies
  fabric_enabled = options[:fabric_enabled] ||= false

  # Include DevSupport dependency
  production = options[:production] ||= false

  # The Pods which should be included in all projects
  pod 'FBLazyVector', :path => "#{prefix}/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "#{prefix}/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "#{prefix}/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "#{prefix}/Libraries/TypeSafety"
  pod 'React', :path => "#{prefix}/"
  pod 'React-Core', :path => "#{prefix}/"
  pod 'React-CoreModules', :path => "#{prefix}/React/CoreModules"
  pod 'React-RCTActionSheet', :path => "#{prefix}/Libraries/ActionSheetIOS"
  pod 'React-RCTAnimation', :path => "#{prefix}/Libraries/NativeAnimation"
  pod 'React-RCTBlob', :path => "#{prefix}/Libraries/Blob"
  pod 'React-RCTImage', :path => "#{prefix}/Libraries/Image"
  pod 'React-RCTLinking', :path => "#{prefix}/Libraries/LinkingIOS"
  pod 'React-RCTNetwork', :path => "#{prefix}/Libraries/Network"
  pod 'React-RCTSettings', :path => "#{prefix}/Libraries/Settings"
  pod 'React-RCTText', :path => "#{prefix}/Libraries/Text"
  pod 'React-RCTVibration', :path => "#{prefix}/Libraries/Vibration"
  pod 'React-Core/RCTWebSocket', :path => "#{prefix}/"

  unless production
    pod 'React-Core/DevSupport', :path => "#{prefix}/"
  end

  pod 'React-cxxreact', :path => "#{prefix}/ReactCommon/cxxreact"
  pod 'React-jsi', :path => "#{prefix}/ReactCommon/jsi"
  pod 'React-jsiexecutor', :path => "#{prefix}/ReactCommon/jsiexecutor"
  pod 'React-jsinspector', :path => "#{prefix}/ReactCommon/jsinspector"
  pod 'React-callinvoker', :path => "#{prefix}/ReactCommon/callinvoker"
  pod 'ReactCommon/turbomodule/core', :path => "#{prefix}/ReactCommon"
  pod 'Yoga', :path => "#{prefix}/ReactCommon/yoga", :modular_headers => true

  pod 'DoubleConversion', :podspec => "#{prefix}/third-party-podspecs/DoubleConversion.podspec"
  pod 'glog', :podspec => "#{prefix}/third-party-podspecs/glog.podspec"
  pod 'Folly', :podspec => "#{prefix}/third-party-podspecs/Folly.podspec"

  if fabric_enabled
    pod 'React-Fabric', :path => "#{prefix}/ReactCommon"
    pod 'React-graphics', :path => "#{prefix}/ReactCommon/fabric/graphics"
    pod 'React-jsi/Fabric', :path => "#{prefix}/ReactCommon/jsi"
    pod 'React-RCTFabric', :path => "#{prefix}/React"
    pod 'Folly/Fabric', :podspec => "#{prefix}/third-party-podspecs/Folly.podspec"
  end
end

def use_flipper!(versions = {}, configurations: ['Debug'])
  versions['Flipper'] ||= '~> 0.54.0'
  versions['Flipper-DoubleConversion'] ||= '1.1.7'
  versions['Flipper-Folly'] ||= '~> 2.2'
  versions['Flipper-Glog'] ||= '0.3.6'
  versions['Flipper-PeerTalk'] ||= '~> 0.0.4'
  versions['Flipper-RSocket'] ||= '~> 1.1'
  pod 'FlipperKit', versions['Flipper'], :configurations => configurations
  pod 'FlipperKit/FlipperKitLayoutPlugin', versions['Flipper'], :configurations => configurations
  pod 'FlipperKit/SKIOSNetworkPlugin', versions['Flipper'], :configurations => configurations
  pod 'FlipperKit/FlipperKitUserDefaultsPlugin', versions['Flipper'], :configurations => configurations
  pod 'FlipperKit/FlipperKitReactPlugin', versions['Flipper'], :configurations => configurations
  # List all transitive dependencies for FlipperKit pods
  # to avoid them being linked in Release builds
  pod 'Flipper', versions['Flipper'], :configurations => configurations
  pod 'Flipper-DoubleConversion', versions['Flipper-DoubleConversion'], :configurations => configurations
  pod 'Flipper-Folly', versions['Flipper-Folly'], :configurations => configurations
  pod 'Flipper-Glog', versions['Flipper-Glog'], :configurations => configurations
  pod 'Flipper-PeerTalk', versions['Flipper-PeerTalk'], :configurations => configurations
  pod 'Flipper-RSocket', versions['Flipper-RSocket'], :configurations => configurations
  pod 'FlipperKit/Core', versions['Flipper'], :configurations => configurations
  pod 'FlipperKit/CppBridge', versions['Flipper'], :configurations => configurations
  pod 'FlipperKit/FBCxxFollyDynamicConvert', versions['Flipper'], :configurations => configurations
  pod 'FlipperKit/FBDefines', versions['Flipper'], :configurations => configurations
  pod 'FlipperKit/FKPortForwarding', versions['Flipper'], :configurations => configurations
  pod 'FlipperKit/FlipperKitHighlightOverlay', versions['Flipper'], :configurations => configurations
  pod 'FlipperKit/FlipperKitLayoutTextSearchable', versions['Flipper'], :configurations => configurations
  pod 'FlipperKit/FlipperKitNetworkPlugin', versions['Flipper'], :configurations => configurations
end

# Post Install processing for Flipper
def flipper_post_install(installer)
  installer.pods_project.targets.each do |target|
    if target.name == 'YogaKit'
      target.build_configurations.each do |config|
        config.build_settings['SWIFT_VERSION'] = '4.1'
      end
    end
  end
end

第二行代码就是路径设置：

# The prefix to the react-native
prefix = options[:path] ||= "../node_modules/react-native"

综上述可以发现，ReactNative的所有本地的path依赖都是 prefix的设置，所以我们只要控制好这个文件的目录的设置即可，但是我们人工修改也不太合适，所以可以考虑脚本自动实现修改。

集成到现有iOS工程下

如果我们想实现在现有iOS工程下，集成RN环境，不保留上一层RN工程目录，其实就是把 node_modules 目录保留到 iOS当前项目下一份，修改对应的路径配置即可，也就是 所有的 ../node_modules 改为 ./node_modules，切不要每个人手动操作，而是通过脚本自动完成。

1.创建一个iOS Demo.

这里我们创建一个Demo演示，直接用Xcode创建iOS项目 iOSRNTest。

2.创建 package.json node依赖配置。

在刚创建的iOS项目目录下，创建文件 package.json node依赖管理文件：

touch package.json

文件配置：

{
  "name": "<项目名>",
  "version": "<项目版本>",
  "private": true,
  "dependencies": {
    "react-native": "0.63.4"
  }
}

其他的不需要依赖，在iOS工程中，只依赖 "react-native": "0.63.4"即可。 注意：这个文件需要和iOS项目一起提交到git仓库。

3.编写 pod 脚本

我们的目标是在执行 pod install的时候 ReactNatiive pod工具就是通过ruby语言编写的，所以我们可以插入ruby脚本来做一些自动化的操作。 在iOS工程目录下创建ruby脚本文件 Podfile_ReactNative.rb，开始编写脚本：

# 定义一个函数，在 Podfile文件中调用此函数即可
def installReactNativeSdk()

    # 设置 react_native_pods.rb 文件路径
    node_mudle_pod_file = "node_modules/react-native/scripts/react_native_pods.rb"

    # 判断该文件是否存在，如果已经存在，表示RN环境已经配置，如果没有存在表示RN环境还未集成到项目
    if File.exist?(node_mudle_pod_file)
        Pod::UI.puts "\nReactNative 环境已存在！\n\n"
    else
        Pod::UI.puts "ReactNative 环境不存在，准备下载···"
        # 判断是否安装 node环境
        if system "node -v > /dev/null"
            # 使用 yarn 或 npm 下载依赖
            if system "yarn install || npm install"
                Pod::UI.puts "ReactNative 环境安装成功！\n\n"
            else
                Pod::UI.puts "ReactNative 环境安装失败！请安装yarn，在命令行执行：npm install -g yarn"
                Kernel.exit(false)
            end
        else
            #如果没有安装，提示自行安装node环境
            Pod::UI.puts "环境下载失败！请先安装node环境，详细见：https://reactnative.cn/docs/environment-setup"
            Kernel.exit(false)
        end
    end
end

此时ruby的脚本已将编写完成，接下来让我们去配置 Podfile文件的设置。

4.配置 Podfile 环境

如果项目下还没有 Podfile文件，可以通过 pod init创建，如果已经存在直接设置。

这里还是用上面创建的空项目 iOSRNTest演示，编辑 Podfile:

# Uncomment the next line to define a global platform for your project

# 设置下载源
source 'https://github.com/CocoaPods/Specs.git'

# 导入我们自定义的脚本
require_relative './Podfile_ReactNative'

# 执行我们编写的RN环境检测代码
installReactNativeSdk()

# 设置RN配置 依赖，这里需要注意，不要使用 ../node_modules/,而是直接node_modules/
require_relative 'node_modules/react-native/scripts/react_native_pods'

# 这里需要注意，RN 0.63版本必须iOS10.0以上版本才支持
platform :ios, '10.0'

target 'iOSRNTest' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # 设置RN Path 依赖
  use_react_native!(:path => "node_modules/react-native")
end

到这里环境全部配置完成，我们可以直接执行 pod install来尝试是否可以快速集成RN环境。 如果不出问题，控制台将会显示下载ReactNative环境日志。

➜  iOSRNTest git:(main) ✗ pod install
ReactNative 环境不存在，准备下载···
yarn install v1.22.10
warning ../../../package.json: No license field
[1/4] 🔍  Resolving packages...

等执行结束后，打开 iOSRNTest.xcworkspace 工程，可以看到 ReactNative环境已经全部集成进去！

5.过滤目录

这里需要注意的是，node_modules目录为RN依赖的资源，没必要提交到git工程，可以在.gitignore文件中过滤掉。

目前我们项目通过这中方式快速集成RN，RN的模块直接在对应的位置通过 RCTRootView展示，其他开发者不太需要关心RN的配置，只要会执行 pod install即可！

因为刚开始做ReactNative，如果您有更好的建议 欢迎评论！

项目Demo提交到Github，可以参考！

注意： git clone后，需要保证本地已经安装node的环境！ 直接执行 pod install ！

avatar
文章
阅读
粉丝
相关推荐
ReactNative源码解析——通信机制详解(1/2)
2.3k阅读
 · 
40点赞
iOS Crash防护你看这个就够了-下篇
2.9k阅读
 · 
21点赞
简述 ReactNative Bundle
5.4k阅读
 · 
42点赞
ReactNative与iOS通信原理解析-JS加载及执行篇
2.2k阅读
 · 
12点赞
RN学习（四）——RN项目集成到现有iOS项目中
2.3k阅读
 · 
4点赞
Mac上更新Ruby
15k阅读
 · 
4点赞
构建基于 iOS 模拟器的前端调试方案
5.7k阅读
 · 
37点赞
Flutter加载本地2x，3x图片
818阅读
 · 
1点赞
CocoaPods安装
540阅读
 · 
0点赞

友情链接：