原生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 " > [email protected]" has unmet peer dependency "[email protected]".

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

复制代码
$ yarn add [email protected]

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

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
© 著作权归作者所有,转载或内容合作请联系作者

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

相关推荐
MyikJ2 小时前
Java面试:从Spring Boot到分布式系统的技术探讨
java·大数据·spring boot·面试·分布式系统
Yehong3 小时前
nuxt实现50个前端小创意(1)——前端基础学习
前端·vue.js
拉不动的猪3 小时前
回顾vue3组件在运行过程中的编译提升
前端·vue.js·trae
孤狼逐月4 小时前
Spring boot集成milvus(spring ai)
spring boot·spring·milvus·spring ai
Debug Your Career4 小时前
在Spring Boot中实现Kafka动态反序列化:针对多主题的灵活数据处理
spring boot·kafka
敬将来的自己4 小时前
Spring Boot整活指南:从Helo World到“真香”定律
java·spring boot·后端
述雾学java4 小时前
Spring Boot 整合 Spring Data JPA、strategy 的策略区别、什么是 Spring Data JPA
java·spring boot·java核心基础
神秘的t5 小时前
SpringBoot 配置文件
java·spring boot·后端·spring·配置文件
刘大浪6 小时前
若依框架 账户管理 用户分配界面解读
spring boot·后端
胡斌附体6 小时前
vue组件和插件的区别
vue.js·组件·插件·vue.component·vue.use