由于官方文檔比較老，很多配置都不能用，集成的時(shí)候遇到很多坑，簡(jiǎn)單的整理一下
時(shí)間節(jié)點(diǎn):2021年9月1日
本文主要提供一些配置信息以及錯(cuò)誤信息解決方案，具體步驟可以參照官方文檔
原版文檔：https://reactnative.dev/docs/integration-with-existing-apps
中文文檔：https://reactnative.cn/docs/integration-with-existing-apps

PS：官方文檔黃色提示部分作用非常大，一定要仔細(xì)看，很多報(bào)錯(cuò)看了黃色提示都能解決

1. 配置項(xiàng)目目錄結(jié)構(gòu)

首先創(chuàng)建一個(gè)空目錄用于存放 React Native 項(xiàng)目，然后在其中創(chuàng)建一個(gè)/ios子目錄，把你現(xiàn)有的 iOS 項(xiàng)目拷貝到/ios子目錄中。

2. 安裝 JavaScript 依賴(lài)包

在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為package.json的空文本文件，然后填入以下內(nèi)容：

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "yarn react-native start"
  }
}

接下來(lái)我們使用 yarn 或 npm（兩者都是 node 的包管理器）來(lái)安裝 React 和 React Native 模塊。請(qǐng)打開(kāi)一個(gè)終端/命令提示行，進(jìn)入到項(xiàng)目目錄中（即包含有 package.json 文件的目錄），然后運(yùn)行下列命令來(lái)安裝：

$ yarn add react-native

這樣默認(rèn)會(huì)安裝最新版本的 React Native，同時(shí)會(huì)打印出類(lèi)似下面的警告信息（你可能需要滾動(dòng)屏幕才能注意到）：

warning " > react-native@0.65.1" has unmet peer dependency "react@17.0.2".
這是正?，F(xiàn)象，意味著我們還需要安裝指定版本的 React：

$ yarn add react@17.0.2

注意必須嚴(yán)格匹配警告信息中所列出的版本，高了或者低了都不可以。

3. 安裝 CocoaPods

安裝方式參照官方文檔，不做贅述
此處提供下Podfile的內(nèi)容，當(dāng)時(shí)因?yàn)镻odfile的問(wèn)題遇到很多坑

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

platform :ios, '11.0'
//use_frameworks!是否使用依照原生項(xiàng)目
use_frameworks!
target 'RNTest' do
//這里放置原生使用的pods
pod 'SVProgressHUD'
pod 'Masonry'

//這里是react-native使用的pods（react-native 0.64+）
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false
  )

  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 the next line.
#   use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
  end
  //如果使用use_frameworks!需要添加這一部分，如果不使用則不需要（非常重要）
  pre_install do |installer|
    Pod::Installer::Xcode::TargetValidator.send(:define_method,
     :verify_no_static_framework_transitive_dependencies) {}
  end
end

安裝完成后到ios文件夾下

$ pod install

如果出現(xiàn)以下錯(cuò)誤

The following build commands failed:
    PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/goodwe/Library/Developer/Xcode/DerivedData/PVMaster-fmlxwaebkuhxpwfecwezdewdswsi/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-85194FC3D0122935CF3BE54D1926EC14.sh
(1 failure)

info Run CLI with --verbose flag for more details.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

并且用Xcode運(yùn)行項(xiàng)目會(huì)出現(xiàn)以下錯(cuò)誤：

Error: Could not determine react-native-codegen location. Try running 'yarn install' or 'npm install' in your project root.
Command /bin/sh failed with exit code 1

解決方法：
在項(xiàng)目根目錄 yarn add react-native-codegen

接下來(lái)的代碼集成參照官方文檔，不做贅述

PS: localhost最好改成本機(jī)的ip地址