原生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' doinherit! :complete# Pods for testingend# 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地址
喜欢的朋友记得点赞、收藏、关注哦!!!
相关文章:
原生iOS集成react-native (react-native 0.65+)
由于官方文档比较老,很多配置都不能用,集成的时候遇到很多坑,简单的整理一下 时间节点:2021年9月1日 本文主要提供一些配置信息以及错误信息解决方案,具体步骤可以参照官方文档 原版文档:https://reactnative.dev/docs…...
java错题总结
本篇文章用来记录学习javaSE以来的错题 解答:重载要求俩个方法的名字相同,但参数的类型或者个数不同,但是不要求返回类型相同,所以A正确。 重写还需要要求返回类型相同(呈现父子类关系也可以,但是属于特例&…...
【商城实战(10)】解锁商品信息录入与展示的技术密码
【商城实战】专栏重磅来袭!这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建,运用 uniapp、Element Plus、SpringBoot 搭建商城框架,到用户、商品、订单等核心模块开发,再到性能优化、安全加固、多端适配…...
2025年主流原型工具测评:墨刀、Axure、Figma、Sketch
2025年主流原型工具测评:墨刀、Axure、Figma、Sketch 要说2025年国内产品经理使用的主流原型设计工具,当然是墨刀、Axure、Figma和Sketch了,但是很多刚入行的产品经理不了解自己适合哪些工具,本文将从核心优势、局限短板、协作能…...
MDM 如何彻底改变医疗设备的远程管理
在现代医疗行业迅速发展的格局中,医院和诊所越来越依赖诸如医疗平板和移动工作站等移动设备。这些设备在提高工作效率和提供卓越的患者护理方面发挥着关键作用。然而,随着它们的广泛使用,也带来了一系列挑战,例如在不同地点确保数…...
OpenCV计算摄影学(18)平滑图像中的纹理区域同时保留边缘信息函数textureFlattening()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 cv::textureFlattening 是 OpenCV 中用于图像处理的一个函数,旨在平滑图像中的纹理区域,同时保留边缘信息。该技术特别适…...
用DeepSeek学Android开发:Android初学者遇到的常见问题有哪些?如何解决?
答案来自 DeepSeek Q: Android初学者遇到的常见问题有哪些?如何解决? A: Android初学者在学习过程中常会遇到以下问题及对应的解决方法,按类别整理如下: 一、开发环境问题 Android Studio安装或配置问题 问题:安装失…...
springboot 集成 MongoDB 基础篇
demo架构: Book Controller: package com.zy.controller;import com.zy.entity.Book; import com.zy.service.MongoDbService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.Get…...
大白话html语义化标签优势与应用场景
大白话html语义化标签优势与应用场景 大白话解释 语义化标签就是那些名字能让人一看就大概知道它是用来做什么的标签。以前我们经常用<div>来做各种布局,但是<div>本身没有什么实际的含义,就像一个没有名字的盒子。而语义化标签就像是有名…...
恶劣天候三维目标检测论文列表整理
恶劣天候三维目标检测论文列表 图摘自Kradar 🏠 介绍 Hi,这是有关恶劣天气下三维目标检测的论文列表。主要是来源于近3年研究过程中认为有意义的文章。希望能为新入门的研究者提供一些帮助。 可能比较简陋,存在一定的遗漏,欢迎…...
conda的环境起的jupyter用不了已经安装的包如何解决
当你在使用Conda环境中的Jupyter Notebook时遇到无法读取某些库或模块的问题,通常是由以下几个原因引起的: 环境未激活:确保你已经在正确的Conda环境中激活了Jupyter Notebook。 库未安装:可能你需要的库没有在当前的Conda环境中…...
蓝桥杯题型
蓝桥杯题型分类 二分 123 传送门 1. 小区间的构成 假设数列的构成是如下形式: 第 1 个区间包含 1 个元素(1)。第 2 个区间包含 2 个元素(1 2)。第 3 个区间包含 3 个元素(1 2 3)。第 4 个区…...
STM32-I2C通信协议
一:I2C通信协议 就是在串口通信上满足四个要求 要求1:删掉一根通信线,防止资源浪费,只能在同一根线上进行发送和接收要求2:需要一个应答机制,没发送一个字节都有一次应答要求3:一根线上能同时…...
taosd 写入与查询场景下压缩解压及加密解密的 CPU 占用分析
在当今大数据时代,时序数据库的应用越来越广泛,尤其是在物联网、工业监控、金融分析等领域。TDengine 作为一款高性能的时序数据库,凭借独特的存储架构和高效的压缩算法,在存储和查询效率上表现出色。然而,随着数据规模…...
uniapp微信小程序vue3自定义tabbar
在App.vue隐藏原生tabbar,也可以在pages.json中配置 二选一就好了 创建 CustomTabBar 公共组件 <template><view class"custom-tab-bar" :style"{paddingBottom: safeAreaHeight px}"><view class"tab-bar-item" :…...
BUUCTF——[GYCTF2020]FlaskApp1 SSTI模板注入/PIN学习
目录 一、网页功能探索 二、SSTI注入 三、方法一 四、方法二 使用PIN码 (1)服务器运行flask登录所需的用户名 (2)modename (3)flask库下app.py的绝对路径 (4)当前网络的mac地…...
如何用Kimi生成PPT?秒出PPT更高效!
做PPT是不是总是让你头疼?😩 快速制作出专业的PPT,今天我们要推荐两款超级好用的AI工具——Kimi 和 秒出PPT!我们来看看哪一款更适合你吧!🚀 🥇 Kimi:让PPT制作更轻松 Kimi的生成效…...
数据结构(回顾)
数据结构(回顾) 回顾 不同点顺序表链表存储空间上物理上一定连续逻辑上连续,物理上不一定连续随机访问支持,时间复杂度O(1)不支持,时间复杂度O(N)任意位置插入或者删除元素可能需要挪动元素,效率低&#…...
全国产!瑞芯微3562Mini(2GHz四核A53 NPU)工业开发板规格书
评估板简介 创龙科技 TL3562-MiniEVM 是一款基于瑞芯微 RK3562J/RK3562 处理器设计的四核 AR M Cortex-A53 单核 ARM Cortex-M0 国产工业评估板,主频高达 2.0GHz。评估板由核心板和评估底板组成,核心板 CPU、ROM、RAM、电源、晶振等所有元器件均采用国…...
鸿蒙HarmonyOS评论功能小demo
评论页面小demo 效果展示 1.拆解组件,分层搭建 我们将整个评论页面拆解为三个组件,分别是头部导航,评论项,回复三个部分,然后统一在index界面导入 2.头部导航界面搭建 Preview Component struct HmNavBar {// 属性&a…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
嵌入式学习笔记DAY33(网络编程——TCP)
一、网络架构 C/S (client/server 客户端/服务器):由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序,负责提供用户界面和交互逻辑 ,接收用户输入,向服务器发送请求,并展示服务…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
站群服务器的应用场景都有哪些?
站群服务器主要是为了多个网站的托管和管理所设计的,可以通过集中管理和高效资源的分配,来支持多个独立的网站同时运行,让每一个网站都可以分配到独立的IP地址,避免出现IP关联的风险,用户还可以通过控制面板进行管理功…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
