原生iOS集成react-native (react-native 0.65+)

由于官方文档比较老,很多配置都不能用,集成的时候遇到很多坑,简单的整理一下
时间节点:2021年9月1日

本文主要提供一些配置信息以及错误信息解决方案,具体步骤可以参照官方文档

原版文档:https://reactnative.dev/docs/integration-with-existing-apps

中文文档:https://reactnative.cn/docs/integration-with-existing-apps

PS:官方文档黄色提示部分作用非常大,一定要仔细看,很多报错看了黄色提示都能解决

1. 配置项目目录结构

首先创建一个空目录用于存放 React Native 项目,然后在其中创建一个/ios子目录,把你现有的 iOS 项目拷贝到/ios子目录中。

2. 安装 JavaScript 依赖包

在项目根目录下创建一个名为package.json的空文本文件,然后填入以下内容:

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

接下来我们使用 yarn 或 npm(两者都是 node 的包管理器)来安装 React 和 React Native 模块。请打开一个终端/命令提示行,进入到项目目录中(即包含有 package.json 文件的目录),然后运行下列命令来安装:

复制代码
$ yarn add react-native

这样默认会安装最新版本的 React Native,同时会打印出类似下面的警告信息(你可能需要滚动屏幕才能注意到):

warning " > react-native@0.65.1" has unmet peer dependency "react@17.0.2".

这是正常现象,意味着我们还需要安装指定版本的 React:

复制代码
$ yarn add react@17.0.2

注意必须严格匹配警告信息中所列出的版本,高了或者低了都不可以。

3. 安装 CocoaPods

安装方式参照官方文档,不做赘述

此处提供下Podfile的内容,当时因为Podfile的问题遇到很多坑

复制代码
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!是否使用依照原生项目
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

如果出现以下错误

复制代码
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运行项目会出现以下错误:

复制代码
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

解决方法:

在项目根目录 yarn add react-native-codegen

接下来的代码集成参照官方文档,不做赘述
PS: localhost最好改成本机的ip地址
最后编辑于:2025-02-24 21:39:51
© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
鼠鼠我捏,要死了捏8 小时前
Spring Boot Actuator自定义指标与监控实践指南
spring boot·监控·actuator
上官浩仁9 小时前
springboot excel 表格入门与实战
java·spring boot·excel
en-route11 小时前
如何在 Spring Boot 中指定不同的配置文件?
java·spring boot·后端
IT毕设梦工厂11 小时前
大数据毕业设计选题推荐-基于大数据的国家医用消耗选品采集数据可视化分析系统-Hadoop-Spark-数据可视化-BigData
大数据·hadoop·信息可视化·spark·毕业设计·数据可视化·bigdata
栀椩11 小时前
springboot配置请求日志
java·spring boot·后端
给月亮点灯|12 小时前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
知识分享小能手12 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
wow_DG13 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(二):虚拟 DOM 与 Diff 算法
开发语言·javascript·vue.js·算法·前端框架
Hexene...14 小时前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架
Jay_See14 小时前
JC链客云——项目过程中获得的知识、遇到的问题及解决
前端·javascript·vue.js