【笔记】React-Native跟Android交互--简单示例

/**
* 使用命令 npx react-native@latest init DemoRN创建项目
* 
* "react": "18.2.0",
* "react-native": "0.73.2"
* 
* 官网有详细教程:https://reactnative.dev/docs/native-modules-android
*/

一、RN invoke android

1、使用Android studio 打开DemoRN项目的android项目创建文件(SendDataToAndroidModule.kt),JavaScript如果要调用原生方法需要用@ReactMethod注解

package com.demornimport android.util.Logimport com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethodclass SendDataToAndroidModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {override fun getName(): String = "SendDataToAndroidModule"@ReactMethod fun sayHelloEvent(name: String, msg: String) {Log.d("Mortal", "Hi! I'm $name, $msg")}
}

2、需要将native modules注册到react native中

package com.demornimport android.view.View
import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ReactShadowNode
import com.facebook.react.uimanager.ViewManagerclass MyAppPackage : ReactPackage {override fun createViewManagers(reactContext: ReactApplicationContext): MutableList<ViewManager<View, ReactShadowNode<*>>> = mutableListOf()override fun createNativeModules(reactContext: ReactApplicationContext): MutableList<NativeModule> = listOf(SendDataToAndroidModule(reactContext)).toMutableList()
}

3、完成原生模块的注册后,就可以在RN的JS上验证,新建组件TestAndroidModuleButton.tsx

import React from 'react';
import { NativeModules, Button } from 'react-native';const { SendDataToAndroidModule } = NativeModules;const TestAndroidModuleButton = () => {const onPress = () => {// console.log('We will invoke the native module here!');SendDataToAndroidModule.sayHelloEvent('Monica', 'How do I use AI');};return (<Buttontitle="Say Now"color="#841584"onPress={onPress}/>);
};export default TestAndroidModuleButton;

4、然后import组件

5、改到android原生代码,需要重新运行项目npm run android

6、最后就是回到Android studio 打开Logcat面板,选择模拟器/真机,测试有没有调用原生方法

二、回调(Callback)

1、不管是处理线上应用奔溃/用户问题反馈,还是给不同用户群体推送广告,RN作为移动端也是避免不了要上报用户的设备信息。昨天试了直接npm install react-native-device-info(或expo-device),暂时用不了,所以放弃了,直接自己实现。

 新建模块DeviceModule.kt,reject需要去优化,不然后面报错拿到错误信息还要再处理

package com.demorn.nativeinvokeimport android.provider.Settings
import android.util.Log
import com.demorn.view.MainApplication
import com.facebook.react.bridge.Callback
import com.facebook.react.bridge.Promise
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod/*** 选择Callback还是Promise根据实际场景而定* */
class DeviceModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {override fun getName(): String = "DeviceModule"/*** 方式一 Callback* @ReactMethod* fun getAndroidId(callback: Callback) {*     callBack.invoke(Settings.Secure.getString(MainApplication.MAIN_APPLICATION!!.contentResolver, Settings.Secure.ANDROID_ID))* }* 调用处:* DeviceModule.getBrand((brand: any) => {*   console.log('Mortal', brand);* })* *//*** 方式二 Promise* 设备ID* */@ReactMethodfun getAndroidId(promise: Promise) {// Settings.Secure.getString(this.getContentResolver(),Settings.Secure.ANDROID_ID);try {promise.resolve(Settings.Secure.getString(MainApplication.MAIN_APPLICATION!!.contentResolver, Settings.Secure.ANDROID_ID))} catch (e: Throwable) {promise.reject("Create Event Error", e)}}/*** 系统版本号* */@ReactMethodfun getSystemVersion(promise: Promise) {try {promise.resolve(android.os.Build.VERSION.RELEASE)} catch (e: Throwable) {promise.reject("Create Event Error", e)}}/*** 手机厂商* */@ReactMethodfun getBrand(promise: Promise) {try {promise.resolve(android.os.Build.BRAND)} catch (e: Throwable) {promise.reject("Create Event Error", e)}}/*** 手机型号* */@ReactMethodfun getSystemModel(promise: Promise) {try {promise.resolve(android.os.Build.MODEL)} catch (e: Throwable) {promise.reject("Create Event Error", e)}}/*** API版本* */@ReactMethodfun getApiLevel(promise: Promise) {try {promise.resolve(android.os.Build.VERSION.SDK_INT.toString())} catch (e: Throwable) {promise.reject("Create Event Error", e)}}
}

临时写了static,拿全局实例

3、然后稍微封装了下DeviceInfo

4、34点这个是根据自己情况去取值

/**打包签名,后续另外文章再记录*/

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

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

相关文章

Java 的 Map 與 List

通過重新new 一個ArrayList 轉化 resTask.setList(new ArrayList<Group>(custMap.values())); 无序的Map List 有序的数据放到Map&#xff0c;就变成无序。 List排序 按照code 的字母进行排序A-Z resTask.getListData().sort(Comparator.comparing(Gmer::getCode));…

Hadoop3.x基础(2)- HDFS

来源&#xff1a;B站尚硅谷 目录 HDFS概述HDFS产出背景及定义HDFS优缺点HDFS组成架构HDFS文件块大小&#xff08;面试重点&#xff09; HDFS的Shell操作&#xff08;开发重点&#xff09;基本语法命令大全常用命令实操准备工作上传下载HDFS直接操作 HDFS的API操作HDFS的API案例…

Vue.js 学习14 集成H265web.js播放器实现webpack自动化构建

Vue.js 学习14 集成H265web.js播放器实现webpack自动化构建 一、项目说明1. H265web.js 简介2. 准备环境 二、项目配置1. 下载 H265web.js2. 在vue项目里引入 H265web3. 设置 vue.config.js 三、代码引用1. 参照官方demo &#xff0c; 创建 executor.js2. 在 vue 页面里引用htm…

Wireshark网络协议分析 - Wireshark速览

在我的博客阅读本文 文章目录 1. 版本与平台2. 快速上手2.1. 选择网络接口进行捕获&#xff08;Capture&#xff09;2.2. 以Ping命令为例进行抓包分析2.3. 设置合适的过滤表达式2.4. 数据包详情2.5. TCP/IP 四层模型 3. 参考资料 1. 版本与平台 Wireshark是一个开源的网络数据…

Linux——安装MySQL

1、安装mysql8.0.35 1.1、安装步骤 1.更新包列表&#xff0c;首先&#xff0c;确保您的系统已更新到最新状态。运行以下命令来更新包列表和安装最新的软件包&#xff1a; sudo apt update sudo apt upgrade2.安装MySQL服务器&#xff1a;运行以下命令来安装MySQL服务器&…

【制作100个unity游戏之23】实现类似七日杀、森林一样的生存游戏5(附项目源码)

本节最终效果演示 文章目录 本节最终效果演示系列目录前言修改鼠标光标和中心提示图鼠标光标素材修改默认鼠标光标修改中心提示图 拾取提示弹窗简单绘制UI拾取弹窗功能 源码完结 系列目录 前言 欢迎来到【制作100个Unity游戏】系列&#xff01;本系列将引导您一步步学习如何使…

ASTORS国土安全奖:ManageEngine AD360荣获银奖

美国安全今日&#xff08;AST&#xff09;的年度“ASTORS”国土安全奖计划是一个备受瞩目的活动&#xff0c;致力于突显国土安全领域的创新与进步。这一奖项旨在表彰在保护国家免受安全威胁方面做出卓越贡献的个人和组织。该计划汇聚了执法、公共安全和行业领袖&#xff0c;不仅…

能耗在线监测系统在节能管理中的应用

上海安科瑞电气股份有限公司 胡冠楠 咨询家&#xff1a;“Acrelhgn”&#xff0c;了解更多产品资讯 摘要&#xff1a;开展能耗在线监测系统建设&#xff0c;对加强政府部门和企业节能管理中的应用前景&#xff0c;分析系统在能源消费预测分析、能效对标、节能监察、能源精细化…

单片机驱动多个ds18b20

目录 1设计内容 2ds18b20介绍 2.1传感器引脚及原理图 2.2寄存器配置 3程序实现 3.1配置初始化 3.2配置寄存器 3.3ROM读取 3.4温度读取 1设计内容 通过51单片机&#xff0c;读取总线上挂载的多个ds18b20的温度信息。 如下图&#xff0c;成功读取到3路温度数据。 2ds18…

路由备份聚合排错

目录 实验拓扑图 实验要求 实验排错 故障一 故障现象 故障分析 故障解决 故障二 故障现象 故障分析 故障解决 故障三 故障现象 故障分析 故障解决 故障四 故障现象 故障分析 故障解决 故障五 故障现象 故障分析 故障解决 实验拓扑图 实验要求 按照图示配…

软件工程知识梳理4-详细设计

详细设计阶段的根本目标是确定应该怎样具体地实现所要求的系统&#xff0c;也就是说.经过这个阶段的设计工作.应该得出对目标系统的精确描述.从而在编码阶段可以把这个描述直接翻译成用某种程序设计语言书写的程序。 详细设计的的目标不仅仅是逻辑上正确地实现每个模块地功能&a…

使用最大边界相关算法处理文章自动摘要

一、需求背景 对于博客或者文章来说&#xff0c;摘要是普遍性的需求。但是我们不可能让作者自己手动填写摘要或者直接暴力截取文章的部分段落作为摘要&#xff0c;这样既不符合逻辑又不具有代表性&#xff0c;那么&#xff0c;是否有相关的算法或者数学理论能够完成这个需求呢&…

【UE 材质】球形遮罩材质

效果 步骤 1. 新建一个材质&#xff0c;这里命名为“M_Mask” 打开“M_Mask”&#xff0c;混合模式设置为已遮罩&#xff0c;勾选双面显示 在材质图表中添加如下节点 此时我们将一个物体赋予材质“M_Mask”并放置在世界坐标原点&#xff0c;可以看到如下效果 2. 如果我们希望能…

UE4学习笔记 FPS游戏制作1 制作第一人称控制器

文章目录 章节目标前置概念Rotator与Vector&#xff1a;roll与yaw与pitch 添加按键输入蓝图结构区域1区域2区域3区域4 章节目标 本章节将实现FPS基础移动 前置概念 Rotator与Vector&#xff1a; Vector是用向量表示方向&#xff0c;UE中玩家的正前方是本地坐标系的(1,0,0)&…

MySQL备份和恢复(二)mysqldump

注意&#xff1a;mysqldump是完全备份 一、mysqldump备份命令 1、 备份数据库 含创建库语句 &#xff08;1&#xff09;备份指定数据库 完全备份一个或多个完整的库&#xff0c; mysqldump -uroot -p[密码] --databases 库名1 [库名2].. >/备份路径/备份文件名.sql#导出…

华为笔记本matebook pro X如何扩容 C 盘空间

一、前提条件 磁盘扩展与合并必须是相邻分区空间&#xff0c;且两个磁盘类型需要相同。以磁盘分区为 C 盘和 D 盘为例&#xff0c;如果您希望增加 C 盘容量&#xff0c;可以先将 D 盘合并到 C 盘&#xff0c;然后重新创建磁盘分区&#xff0c;分配 C 盘和 D 盘的空间大小。 访…

ADI 配合 USRP 使用的相控阵天线 cn0566

相控阵天线 在这里插入图片描述

vulnhub靶场之Matrix-Breakout 2 Morpheus

一.环境搭建 1.靶场描述 This is the second in the Matrix-Breakout series, subtitled Morpheus:1. It’s themed as a throwback to the first Matrix movie. You play Trinity, trying to investigate a computer on the Nebuchadnezzar that Cypher has locked everyone…

WebAssembly核心编程[1]:wasm模块实例化的N种方式

当我们在一个Web应用中使用WebAssembly&#xff0c;最终的目的要么是执行wasm模块的入口程序&#xff08;通过start指令指定的函数&#xff09;&#xff0c;要么是调用其导出的函数&#xff0c;这一切的前提需要创建一个通过WebAssembly.Instance对象表示的wasm模块实例(源代码…

vuex组件之间共享数据的方式

父向子传值:v-bind 属性绑定 子向父传值:v-on 事件绑定 $on 接收数据的那个组件 $emit 发送数据的那个组件 其他的传值方式: ref 获取dom元素还有组件 $children获取子组件集合 $parent获取父组件 路由参数--组件传值 1.Vuex概述 1 1.Vuex概述 Vuex是实现组件全局状…