React Native集成到现有原生应用

本篇文章以MacOS环境开发iOS平台为例，记录一下在原生APP基础上集成React Native

React Native中文网 详细介绍了搭建环境和集成RN的步骤。

环境搭建

必须安装的依赖有：Node、Watchman、Xcode 和 CocoaPods。

安装Homebrew

Homebrew是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。

  • 安装brew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  • 查看brew版本
brew -v

Node & Watchman

Node.js是在Google Chrome V8 JavaScript引擎的基础上构建的，一个开源的跨平台JavaScript运行时环境。

Watchman是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

  • 安装

推荐使用Homebrew来安装 Node 和 Watchman。

brew install node
brew install watchman
  • 查看版本
node -v
  • 卸载node
brew uninstall node

安装完 Node 后建议设置 npm 镜像（淘宝源）

# 使用nrm工具切换淘宝源
npx nrm use taobao# 如果之后需要切换回官方源可使用
npx nrm use npm
  • 安装Yarn

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。安装完 yarn 之后就可以用 yarn 代替 npm 了。

npm install -g yarn

Xcode & CocoaPods

这两个就不过多解释了。
CocoaPods安装

sudo gem install cocoapods

或者

brew install cocoapods

关于更多CocoaPods问题参考：CocoaPods安装 CocoaPods常见错误总结

集成React Native

其实有两种集成方案，第一种就是按照官方的步骤，在RN项目中添加自己原生的iOS和Android项目。

另一种就是在原生项目中以submodule或子组件的形式添加RN，个人认为后者的项目管理方式较好，不影响主项目的架构。

请添加图片描述

But，网上给的Podfile配置都是低版本的react-native，我使用的版本是0.73.0的，我配置Podfile一直出错，在官方GitHub或QQ群提问也没人理我，最后我就按第一种配置了，后面有哪位大神有第二种的配置方案，可以教我一下~

创建React Native新项目

默认会创建最新的版本

npx react-native init MyReactNative

或者安装指定版本

//最新版本
npx react-native@latest init MyReactNative//注意版本号必须精确到两个小数点
npx react-native@0.68.0 init MyReactNative

安装完成后，不需要加载cocoaPods依赖
请添加图片描述

这是的项目目录如下图，每个文件做什么的，我做了标注。

请添加图片描述

我们把android 和 ios 两个文件夹下的文件清空就行，把自己的项目放到对应的目录下。

配置CocoaPods

  • 创建配置文件Podfile
    在项目根目录下，来到/ios目录
cd ios
pod init

打开Podfile，键入以下内容

source 'https://github.com/CocoaPods/Specs.git'# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p','require.resolve("react-native/scripts/react_native_pods.rb",{paths: [process.argv[1]]},)', __dir__]).stripplatform :ios, min_ios_version_supported
prepare_react_native_project!# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
#
# To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
# ```js
# module.exports = {
#   dependencies: {
#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
# ```
flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabledlinkage = ENV['USE_FRAMEWORKS']
if linkage != nilPod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".greenuse_frameworks! :linkage => linkage.to_sym
enddef common_pods# 网络请求pod 'AFNetworking'# 时间选择器pod 'FQDateTimePicker'# 锁屏pod 'FQLockSDK'
endtarget 'MyReactNative(你的iOS项目名字)' do
# iOS原生的三方依赖common_podsconfig = use_native_modules!use_react_native!(:path => config[:reactNativePath],# Enables Flipper.## Note that if you have use_frameworks! enabled, Flipper will not work and# you should disable the next line.:flipper_configuration => flipper_config,# An absolute path to your application root.:app_path => "#{Pod::Config.instance.installation_root}/..")target 'MyReactNativeTests' doinherit! :complete# Pods for testingendpost_install do |installer|# https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202react_native_post_install(installer,config[:reactNativePath],:mac_catalyst_enabled => false)end
end

然后下载三方依赖

pod install

iOS原生运行RN

配置Xcode

在Info.plist文件中配置本地运行的 Metro 服务。

<key>NSAppTransportSecurity</key>
<dict><key>NSExceptionDomains</key><dict><key>localhost</key><dict><key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key><true/></dict></dict>
</dict>
编写index.js

iOS和RN交互的入口就是RN项目根目录下的index.js文件，官方给的index.js案例代码是：

import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';const RNHighScores = ({scores}) => {const contents = scores.map(score => (<Text key={score.name}>{score.name}:{score.value}{'\n'}</Text>));return (<View style={styles.container}><Text style={styles.highScoresTitle}>2048 High Scores!</Text><Text style={styles.scores}>{contents}</Text></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#FFFFFF',},highScoresTitle: {fontSize: 20,textAlign: 'center',margin: 10,},scores: {textAlign: 'center',color: '#333333',marginBottom: 5,},
});// 模块名称
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
iOS原生跳转RN页面

在原生开发中，你可以通过一个点击事件或函数跳转到RN页面。

首先导入RCTRootView的头文件。

#import <React/RCTRootView.h>

- (void)highScoreButtonPressed {NSLog(@"High Score Button Pressed");//这里给的是localhost本地的服务地址，当你上线后要动态配置下你自己服务器的地址NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];RCTRootView *rootView =[[RCTRootView alloc] initWithBundleURL: jsCodeLocationmoduleName: @"RNHighScores"initialProperties:@{@"scores" : @[@{@"name" : @"Alex",@"value": @"42"},@{@"name" : @"Joel",@"value": @"10"}]}launchOptions: nil];UIViewController *vc = [[UIViewController alloc] init];vc.view = rootView;[self presentViewController:vc animated:YES completion:nil];
}
开启Metro服务

要运行应用，首先需要启动开发服务器（即 Metro，它负责实时监测 js 文件的变动并实时打包，输出给客户端运行，所以需要你有metro.config.js配置文件）。

进入到RN项目根目录中，然后运行：

yarn start

如果报错 yarn start Command react-native not found.
请添加图片描述
那是react-native-cli命令行工具影响的，先卸载掉。

npm uninstall -g react-native-cli
npm uninstall -g react-native-cli @react-native-community/cli

然后再执行yarn start，如果还报错，就主动安装下react-native-cli

yarn add react-native-cli

启动之后如下图：
在这里插入图片描述

这时候打开Xcode，选择模拟器(run)运行iOS项目就可以了。
如果遇到CocoaPods报错，比如RN依赖的某个文件找不到，来到RN根目录下拉取一下三方依赖。

npx pod-install ios

✿✿ヽ(°▽°)ノ✿✿✿ヽ(°▽°)ノ✿✿

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/605294.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

电商API接口|电商平台使用的物流API的安全风险

电商API接口|电商平台使用的物流API的安全风险

电子商务平台的物流 API 如果出现安全漏洞&#xff0c;则消费者的个人信息会被大量暴露。 物流 API 整合了企业和第三方供应商之间的数据和服务&#xff0c;以解决各种市场需求。如果 电商API 接口集成不当&#xff0c;可能会出现泄露个人身份信息 (PII) 的风险。许多使用 API…
阅读更多...
京东商品详情API接口（item_get-获得JD商品详情）电商领域的重要角色

京东商品详情API接口（item_get-获得JD商品详情）电商领域的重要角色

电商API接口在电商领域中扮演着重要的角色&#xff0c;它们为电商平台提供了许多功能和便利。以下是电商API接口的一些主要用途&#xff1a; 商品信息查询&#xff1a;通过API接口&#xff0c;第三方开发者或商家可以查询电商平台上的商品信息&#xff0c;包括商品详情、价格、…
阅读更多...
Spark六：Spark 底层执行原理SparkContext、DAG、TaskScheduler

Spark六：Spark 底层执行原理SparkContext、DAG、TaskScheduler

Spark底层执行原理 学习Spark运行流程 学习链接&#xff1a;https://mp.weixin.qq.com/s/caCk3mM5iXy0FaXCLkDwYQ 一、Spark运行流程 流程&#xff1a; SparkContext想西苑管理器注册并向资源管理器申请运行Executor资源管理器分配Executor&#xff0c;然后资源管理器启动Ex…
阅读更多...
系列十四、理解MySQL varchar(50)

系列十四、理解MySQL varchar(50)

一、理解MySQL varchar(50) 1.1、概述 日常开发中&#xff0c;数据库建表是必不可少的一个环节&#xff0c;建表的时候通常会看到设定某个字段的长度为varchar(50)&#xff0c;例如如下建表语句&#xff1a; 那么怎么理解varchar(50)&#xff1f;这个分情况的&#xff0c;MySQ…
阅读更多...
静态路由、代理ARP

静态路由、代理ARP

目录 静态路由静态路由指明下一跳和指明端口的区别代理ARP 我们知道&#xff0c;跨网络通信需要路由 路由有三种类型&#xff1a; 1.直连路由。 自动产生的路由&#xff0c;当网络设备连接到同一网络时&#xff0c;他们可以自动学习到对方的存在。自动学习相邻网络设备的直连信…
阅读更多...
用通俗易懂的方式讲解：使用 Mistral-7B 和 Langchain 搭建基于PDF文件的聊天机器人

用通俗易懂的方式讲解：使用 Mistral-7B 和 Langchain 搭建基于PDF文件的聊天机器人

在本文中&#xff0c;使用LangChain、HuggingFaceEmbeddings和HuggingFace的Mistral-7B LLM创建一个简单的Python程序&#xff0c;可以从任何pdf文件中回答问题。 一、LangChain简介 LangChain是一个在语言模型之上开发上下文感知应用程序的框架。LangChain使用带prompt和few…
阅读更多...
盛元广通实验室业务流审批管理系统2.0

盛元广通实验室业务流审批管理系统2.0

系统通过对取样、分析、数据处理、检验报告等分析全过程中多种影响因素的有效管理&#xff0c;强化检验质量&#xff0c;获得准确可靠的分析成果。业务流审批管理系统主要包括了检测管理、业务受理、样品管理、资源质量管理、分包管理、报告生成、统计分析等&#xff0c;系统能…
阅读更多...
7N65-ASEMI高压NPN型MOS管7N65

7N65-ASEMI高压NPN型MOS管7N65

编辑&#xff1a;ll 7N65-ASEMI高压NPN型MOS管7N65 型号&#xff1a;7N65 品牌&#xff1a;ASEMI 连续漏极电流(Id)&#xff1a;4A 漏源电压(Vdss)&#xff1a;650V 栅极阈值电压&#xff1a;30V 单脉冲雪崩能量&#xff1a;150mJ 集电极电流&#xff08;脉冲&#xff…
阅读更多...
网络安全B模块（笔记详解）- 网络爬虫渗透测试

网络安全B模块（笔记详解）- 网络爬虫渗透测试

LAND网络渗透测试 1.进入虚拟机操作系统：BT5中的/root目录，完善该目录下的land.py文件，填写该文件当中空缺的Flag1字符串，将该字符串作为Flag值（形式：Flag1字符串）提交；（land.py脚本功能见该任务第6题） 输入flag sendp(packet) Flag：sendp(packet) 2.进入虚拟机操作…
阅读更多...
关键字、标志符、变量、基本数据类型

关键字、标志符、变量、基本数据类型

1、关键字 1.1、定义 定义&#xff1a;被JAVA语言赋予了特殊含义&#xff0c;用作专门用途的字符串&#xff08;或单词&#xff09; 特点&#xff1a;全部关键字都是小写字母 上源码&#xff1a; 代码中定义类的关键字class&#xff0c;定义一个订单控制器类 ​​​​​​​…
阅读更多...
用Java爬取新房二手房数据看总体大环境

用Java爬取新房二手房数据看总体大环境

都说现在房市惨淡&#xff0c;导致很多人在观望&#xff0c;那么今天我写一段爬虫&#xff0c;主要是抓取各地新房以及二手房成交状况&#xff0c;然后了解总体楼市是否回暖上升。 以下是Java爬虫程序的代码示例&#xff0c;用于抓取贝壳网新房和二手房数据&#xff1a; impor…
阅读更多...
污水处理成套设备如何选择

污水处理成套设备如何选择

污水处理是现代社会中不可或缺的一个重要环节&#xff0c;它涉及到环保领域&#xff0c;与人们的生活和健康息息相关。而污水处理成套设备的选择则显得尤为重要&#xff0c;因为合适的设备能够有效地解决水污染问题&#xff0c;提高环境质量。 在选择污水处理成套设备时&#x…
阅读更多...
Python绘制茎叶图：plt.stem

Python绘制茎叶图：plt.stem

文章目录 简介参数演示 简介 茎叶图从外观来看&#xff0c;更像是火柴&#xff0c;由基线、茎线、茎头三部分构成。最简单的示例如下 import numpy as np import matplotlib.pyplot as plt plt.stem(np.sin(np.arange(10))) plt.show()参数 stem的完整参数如下 stem([locs,…
阅读更多...
【C++】- 类和对象(构造函数！析构函数！拷贝构造函数！详解）

【C++】- 类和对象(构造函数！析构函数！拷贝构造函数！详解）

类和对象② 类的6个默认成员函数构造函数析构函数拷贝构造函数 类的6个默认成员函数 上一篇详细介绍了类。如果一个类中什么成员都没有&#xff0c;简称为空类。 那么空类中真的什么都没有吗&#xff1f; 并不是&#xff0c;当类在什么都不写时&#xff0c;编译器会自动生成…
阅读更多...
SQLServer设置端口，并设置SQLServer和SQLServer Browser服务

SQLServer设置端口，并设置SQLServer和SQLServer Browser服务

SQLServer默认使用动态端口&#xff0c;即每次启动sqlserver.exe时&#xff0c;端口port都会动态变化。若要使用静态端口&#xff0c;比如port1433&#xff0c;则需要在SQL Server Configuration Manager(简称SSMS&#xff09;里配置。这里以SQL Server 2005 Configuration Man…
阅读更多...
安科瑞有序充电运营场站落成-安科瑞 蒋静

安科瑞有序充电运营场站落成-安科瑞 蒋静

今年6月&#xff0c;发布了《关于进一步构建高质量充电基础设施体系的指导意见》&#xff0c;提出到2030年基本建成高质量充电基础设施体系&#xff0c;以支撑新能源汽车产业的发展和满足人民群众的出行充电需求。7月底&#xff0c;国家部门印发了《关于促进汽车消费的若干措施…
阅读更多...
应对 DevOps 中的技术债务：创新与稳定性的微妙平衡

应对 DevOps 中的技术债务：创新与稳定性的微妙平衡

技术性债务在DevOps到底意味着什么&#xff1f;从本质上讲&#xff0c;这是小的开发缺陷的积累&#xff0c;需要不断地返工。它可能由多种原因引起&#xff0c;例如快速交付新功能的压力&#xff0c;这可能会导致团队不得不牺牲代码的整洁和完善。但这些不完整的小代码&#xf…
阅读更多...
Qt - QML框架

Qt - QML框架

文章目录 1 . 前言2 . 框架生成3 . 框架解析3.1 qml.pro解析3.2 main.cpp解析3.3 main.qml解析 4 . 总结 【极客技术传送门】 : https://blog.csdn.net/Engineer_LU/article/details/135149485 1 . 前言 什么是QML&#xff1f; QML是一种用户界面规范和编程语言。它允许开发人员…
阅读更多...
桌面图标变成白色文件？学会这4个方法，轻松解决！

桌面图标变成白色文件？学会这4个方法，轻松解决！

“不知道为什么&#xff0c;我有些文件夹直接保存在电脑桌面了&#xff0c;但是今天查看的时候却发现它们变成了白色的文件。有什么方法可以解决这个问题吗&#xff1f;” 在使用电脑时&#xff0c;可能由于各种原因&#xff0c;会出现桌面图标变成白色文件的情况。这不仅会让用…
阅读更多...
docker安裝gocd-server，并配置gitlab授权登录

docker安裝gocd-server，并配置gitlab授权登录

gocd的地址&#xff1a;Installing GoCD server on Windows | GoCD User Documentation gocd文档&#xff1a;GitHub - gocd/docker-gocd-server: Docker server image for GoCD 一、docker拉取gocd镜像 #拉取server镜像 docker pull gocd/gocd-server:v21.1.0docker pull g…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023