React Native 桥接原生实现 JS 调用原生方法

一、为什么需要桥接原生

为了满足在React 层无法实现的需求

  • 复杂高性能的组件:复杂表格、视频播放
  • 原生层开发能力:传感器编程、widget
  • 平台属性:系统信息、设备信息
  • 对接第三方应用:相机、相册、地图

真实的开发过程中是不可能完全使用JS就能实现所有功能,不可避免的会去使用到原生提供的能力,所以就需要去桥接原生。

二、桥接原生方法

1、编写并注册原生方法

在这里插入图片描述
在 MainAppLication 中有一个 ReactNativeHost 对象,其中有一个 getPackages 方法返回的就是自定义 packages。

第一步:自定义属于自己的 package

在这里插入图片描述
首先自定义一个类 SmallDaysPackage 继承自类 ReactPackage 并重写覆盖它的两个方法

  • creatNativeModuls 主要用于桥接原生的方法
  • createViewManagers 主要用于桥接原生的组件

在这里插入图片描述
第二步:原生模块 SmallDaysAppModule 的编写

再新建一个类模块 SmallDaysAppModule ,在这个模块中有一个 getName 方法返回这个模块的名字,在 RN 中就可通过导出的一个同名的变量访问到该模块中的方法

在这里插入图片描述

将自定义的 smallDaysModule 添加到 modules 中就完成了原生模块的注册

在这里插入图片描述

将自定义的 SmallDaysPackage 添加到 packages 中就完成了该模块的注册

在这里插入图片描述
上述工作完成后,剩下的就是在 SmallDaysAppModule 中编写原生方法。

第三步:在 SmallDaysAppModule 中编写方法,实现跳转相册功能和获取版本

  • 跳转相册不需要返回值,是一种没有返回值的函数调用
  • 获取版本需要返回版本号,是带返回值的函数调用,它通过Promise 对象的 resolve 和 reject 方法来处理成功和异常的回调。
    在这里插入图片描述

二、在 JS 层调用原生方法

导入 NativeModules

在这里插入图片描述

在 NativeModules 中取出自定义的原生模块 SmallDaysApp

在这里插入图片描述

SmallDaysApp 就是在原生模块 SmallDaysAppModule 中 getName 方法返回的名字

在这里插入图片描述

效果

请添加图片描述
在这里插入图片描述

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

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

相关文章

Spring循环引用和三级缓存

前言 Spring 解决 Bean 之间的循环引用关系用到了三级缓存,那么问题来了。三级缓存是怎么用的?每一层的作用是什么?非得用三级吗?两级缓存行不行? 理解循环引用 所谓的“循环引用”是指 Bean 之间的依赖关系形成了一…

2023年全国职业院校技能大赛(高职组)“云计算应用”赛项赛卷④

2023年全国职业院校技能大赛(高职组) “云计算应用”赛项赛卷4 目录 需要竞赛软件包环境以及备赛资源可私信博主!!! 2023年全国职业院校技能大赛(高职组) “云计算应用”赛项赛卷4 模块一 …

一键搭建elk

一键启动elk 1. 生成环境的脚本 setup.sh #!/usr/bin/bash# logstash enviroment mkdir -p logstash touch logstash/logstash.conf # shellcheck disableSC1078 echo input {tcp {mode > "server"host > "0.0.0.0"port > 4560codec > jso…

多PC文件夹同步方案

在多个工作终端独立具备svn版本库的情况下,可使用本工具进行一键同步。 相较于传统的SVN中心检出更新方案中移动存储设备硬件及文件目录系统多终端间易损坏,本方案更加稳定 资料同步结构: 使用步骤: 1.修改config.ini配置文件 2…

【C++】HP-Socket(二):框架介绍、功能说明

1、接口 1.1 接口模型 1.2 三类接口 HP-Socket 定义了三类接口 组件接口(如:ITcpServer / IUdpClient):声明组件操作方法,应用程序创建组件对象后通过该接口来使用组件组件实现类(如:CTcpSer…

Mac 安装Nginx教程

Nginx官网 Nginx官网英文 1.在终端输入brew search nginx 命令检查nginx是否安装了 2. 安装命令:brew install nginx 3. 查看Nginx信息命令brew info nginx 4. 启动 nginx方式:在终端里输入 nginx 5.查看 nginx 是否启动成功 在浏览器中访问http://l…

powerdesigner导出sql将name放到comment注释上

1. 批量设置 2. 脚本 Option Explicit ValidationMode True InteractiveMode im_Batch Dim mdl the current modelget the current active model Set mdl ActiveModel If (mdl Is Nothing) ThenMsgBox"There is no current Model " ElseIf Not mdl.IsKindOf(PdPD…

JSON数据处理

1.添加json依赖 springmvc 默认使用jackson作为json类库,不需要修改applicationContext-servlet.xml任何配置&#xff0c;只需引入以下类库springmvc就可以处理json数据&#xff1a; <!--spring-json依赖--> <dependency><groupId>com.fasterxml.jackson.c…

构建自己的私人GPT-支持中文

上一篇已经讲解了如何构建自己的私人GPT&#xff0c;这一篇主要讲如何让GPT支持中文。 privateGPT 本地部署目前只支持基于llama.cpp 的 gguf格式模型&#xff0c;GGUF 是 llama.cpp 团队于 2023 年 8 月 21 日推出的一种新格式。它是 GGML 的替代品&#xff0c;llama.cpp 不再…

【cmu15445c++入门】(2)c++中的std::move() 左值引用右值引用

左值右值 要理解move语义&#xff0c;必须理解左值和右值的概念。左值的简化定义是左值是对象&#xff0c;指向内存中某个位置。右值是左值之外的任何。 std::move() move语义&#xff0c;在C中是一个有用的方法&#xff0c;它允许在对象之间高效和优化地转移数据所有权。m…

SpringMVC SpringMVC概述

1.1.MVC介绍 MVC是一种设计模式&#xff0c;将软件按照模型、视图、控制器来划分&#xff1a; M&#xff1a;Model&#xff0c;模型层&#xff0c;指工程中的JavaBean&#xff0c;作用是处理数据 JavaBean分为两类&#xff1a; 一类称为数据承载Bean&#xff1a;专门存储业务数…

vue3 useAttrs的使用场景,提取共有props

1 场景 多个类似组件都需要传参data&#xff0c;用于请求接口或者处理数据&#xff0c;想让组件干净整洁&#xff0c;把参数data提出来 2 方法 选项式 可以使用mixin混入或者extends继承&#xff08;略&#xff09; 组合式 可以使用hook 无脑式踩坑&#xff08;如下代码…

LabVIEW在设备状态监测与故障诊断中的应用

在现代工业自动化领域&#xff0c;LabVIEW的系统设计平台在设备状态监测与故障诊断中扮演着举足轻重的角色。通过提供一个可视化和数据流编程语言&#xff0c;LabVIEW大大提升了设备安全监测的效率&#xff0c;减少了系统维护成本&#xff0c;同时增强了设备的可靠性和可维护性…

Verilog 高级教程笔记——持续更新中

Verilog advanced tutorial 转换函数 调用系统任务任务描述int_val $rtoi( real_val ) ;实数 real_val 转换为整数 int_val 例如 3.14 -> 3real_val $itor( int_val ) ;整数 int_vla 转换为实数 real_val 例如 3 -> 3.0vec_val $realtobits( real_val ) ;实数转换为…

Yolov5水果分类识别+pyqt交互式界面(附代码)

本文介绍了基于Yolov5模型的水果分类识别系统以及使用PyQt库构建的交互式界面。 首先&#xff0c;Yolov5是一种目标检测算法&#xff0c;它可以通过输入图片&#xff0c;自动识别出其中包含的不同目标&#xff0c;并标注出它们的位置和类别。我们利用Yolov5模型对水果图片进行…

【算法Hot100系列】有效的数独

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

6款实用的Git可视化管理工具

前言 俗话说得好“工欲善其事&#xff0c;必先利其器”&#xff0c;合理的选择和使用可视化的管理工具可以降低技术入门和使用门槛。我们在团队开发中统一某个开发工具能够降低沟通成本&#xff0c;提高协作效率。今天给大家分享6款实用的Git可视化管理工具。 Git是什么&…

01-连接池项目背景:C++的数据库操作

从0开始学习C与数据库的联动 1.原始方式-使用MySQL Connector/C 提供的API查询 1.1 数据库预操作 我的本地电脑上有mysql数据库&#xff0c;里面预先创建了一个database名叫chat&#xff0c;用户名root&#xff0c;密码password。 1.2 Visual Studio预操作 在Windows上使用…

openGauss学习笔记-189 openGauss 数据库运维-常见故障定位案例-TPCC-WAL-内存

文章目录 openGauss学习笔记-189 openGauss 数据库运维-常见故障定位案例-TPCC-WAL-内存189.1 TPCC运行时&#xff0c;注入磁盘满故障&#xff0c;TPCC卡住的问题189.1.1 问题现象189.1.2 原因分析189.1.3 处理分析 189.2 备机处于need repair(WAL)状态问题189.2.1问题现象189.…

1876_电感的特性小结

Grey 全部学习内容汇总&#xff1a; GitHub - GreyZhang/g_hardware_basic: You should learn some hardware design knowledge in case hardware engineer would ask you to prove your software is right when their hardware design is wrong! 1876_电感的特性小结 主要是…