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.demorn
 
import android.util.Log
 
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
 
class 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.demorn
 
import 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.ViewManager
 
class 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 (
    <Button
      title="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.nativeinvoke
 
import 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
     * */
    @ReactMethod
    fun 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)
        }
    }
 
    /**
     * 系统版本号
     * */
    @ReactMethod
    fun getSystemVersion(promise: Promise) {
        try {
            promise.resolve(android.os.Build.VERSION.RELEASE)
        } catch (e: Throwable) {
            promise.reject("Create Event Error", e)
        }
    }
 
    /**
     * 手机厂商
     * */
    @ReactMethod
    fun getBrand(promise: Promise) {
        try {
            promise.resolve(android.os.Build.BRAND)
        } catch (e: Throwable) {
            promise.reject("Create Event Error", e)
        }
    }
 
    /**
     * 手机型号
     * */
    @ReactMethod
    fun getSystemModel(promise: Promise) {
        try {
            promise.resolve(android.os.Build.MODEL)
        } catch (e: Throwable) {
            promise.reject("Create Event Error", e)
        }
    }
 
    /**
     * API版本
     * */
    @ReactMethod
    fun 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点这个是根据自己情况去取值

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

!Mortal
关注

6

9

0

专栏目录
react-native-reanimated：重新实现React Native的动画库
02-03
React原生复活 重新实现React Native的动画库 复活2在这里！ 查看我们的以获取更多信息 React Native Reanimated为要在其之上构建的Animated库API提供了更全面的低级抽象，因此允许更大的灵活性，尤其是在基于手势的交互中。 安装 查看我们文档的部分以获取详细的安装说明。 文献资料 请查看我们专用的文档页面，以获取有关该库，API参考和更多信息的信息： : 例子 示例（展示）应用程序的源代码位于目录下。 如果您想使用API​​但又不想在真实的应用程序上尝试它，则可以运行示例项目。 检查示例/目录自述文件以获取安装说明。 执照 复活的图书馆已根据获得。 学分 在 ， 和的支持，该项目已经构建并维护。
react-native-wearables：适用于iOS和Android可穿戴设备的React Native通用接口
02-04
React本地可穿戴设备 具有本机接口的React Native模块，可与iOS和Android上的可穿戴设备进行交互。 入门 浏览到您react-native应用程序。 （有关示例，请参见） 安装本机可穿戴设备。 npm install react-native-wearables 安装对等依赖项。 npm install rn-apple-healthkit react-native-google-fitness 链接本机模块。 react-native link 编辑android/app/src/main/java/.../MainApplication.java 。 看起来像
ios原生和react-native各种交互的示例代码
08-29
本篇文章主要介绍了ios原生和react-native各种交互的示例代码，非常具有实用价值，需要的朋友可以参考下
react-native-rename：仅用一个命令即可重命名react-native应用
01-30
react-native-rename 只需一个命令即可重命名react-native应用 该软件包假定您使用react-native init创建了react-native项目。 注意：此软件包不会尝试正确重命名构建工件，例如ios/build或Cocoa Pod安装目标。 重命名项目后，您应该清理，构建并重新安装第三方依赖项，以使新名称正确地运行。 用法 $ npx react-native-rename <newName> 使用自定义的捆绑包标识符（仅限Android。对于iOS，请使用Xcode） $ npx react-native-rename <newName> -b <bundleIdentifier> 例 首先，切换到新分支（可选，但建议） $ git checkout -b rename-app 然后，重命名您的应用 $ npx react-native-rename "Travel App" 使用自定义的捆绑包标识符 $ npx react-native-rename "Travel App" -b com.junedomingo.travelapp 本
react-native-select：react native的简单下拉列表-iOS和Android
02-05
React本机选择 React Native App的简单下拉菜单！ 您的React Native选择标签。 备择方案 ： ：这是一个升级的且易于使用的API。 您可以将其自定义为最大。 介绍 React Native Selectme在React Native中非常简单，可自定义并且易于使用。 它已经在Android和IOS上进行了测试，并且非常吸引人。 安装 npm i react-native-selectme --save 用法 在您的Javascript文件中要求它。 还支持使用对象解构的组件。 Select Option OptionList 。 <OptionList>
react-native-modal-datetime-picker：适用于Android和iOS的React-Native datetime-picker
01-30
$ npm i react-native-modal-datetime-picker @react-native-community/datetimepicker # using yarn $ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker 请注意， @react-...
react-native-detect-navbar-android:React Native模块，告知android设备是否具有软导航栏
05-28
react-native-detect-navbar-android 检测Android设备的软导航栏，以便您知道哪个具有物理键（Home，Back，Menu），而哪些没有。 注意：该项目仅适用于Android，如果您使用它来检测软键是否被隐藏，它将无法正常...
适用于 Android 和 iOS 的 React Native NFC 模块 react-native-nfc
05-28
为 React Native 带来 NFC 功能。灵感来自phonegap-nfc和react-native-ble-manager 该库最简单（也是最常见）的用例是读取NFC包含 的标签NDEF，可以通过以下代码实现： import React from 'react'; import {View, ...
react-native-amap3d：react-native高德地图组件，使用最新的3D SDK，支持Android + iOS
02-05
react-native-amap3d react-native高德地图组件，使用最新的3D SDK，支持Android + iOS，受启发，提供功能丰富且易用的接口。 相关项目推荐： 关联文档： : 功能 地图模式切换（常规，卫星，导航，夜间） 3D建筑，路况，室内地图 内置地图控件的显示隐藏（指南针，比例尺，定位按钮，缩放按钮） 手势交互控制（平移，缩放，旋转，倾斜） 中心坐标，缩放等级，倾斜度的设置，支持动画过渡 地图事件（onPress，onLongPress，onLocation，onStatusChange） 地图标记（Marker） 自定义信息平均值 自定义图标 折线投射
native react 折线图_ReactNative学习笔记六之折线图
weixin_32569115的博客
 530
由于项目需要，最近调研使用EChart，百度的这个项目真的是很不错，使用方便，接口清晰。今天就跟大家分享一下。使用方式EChart需要native-echarts库，所以一上来需要npm install native-echarts --save然后就可以在你的项目中使用了。废话不多说，我先上代码：import React, {Component} from 'react';import {App...
React Native网络请求学习笔记(Android版本)
奋斗小小鸟的专栏
 6495
概述 示例 效果 js端代码 注意事项 实现原理 原理概述 js端代码分析待完善 JNI端代码分析待完善 android端代码分析 代码下载地址 参考资料 概述 这篇文章首先会展示react native的一个简单的访问网络请求的例子。然后会分析代码的实现。 示例 效果 页面初始化的时候展示一个可点击的文本“点我测试网络”。 用户点击文本后，会访问网络和风天气api
JS状态容器—Redux与React-Redux及中间件使用
zcmain的专栏
 666
文章目录基础什么是Redux？安装Redux核心思想三大原则单一数据源State只读使用纯函数来执行修改ActionReducerStoreState的基本结构`React-Redux` 使用安装React Redux核心API讲解1. Provider2. connect完整示例代码扩展：1. 嵌套组件中访问Redux Store State2. 使用`combineReducers`合并多个零...
react native学习笔记22——常用API（4）ToastAndroid、BackHandler及特定平台代码常用写法
MrOnion的专栏
 1539
前言前面三节中介绍的React Native官方提供的api都是双平台通用的api，在React Native中也有一些只在特定平台才能使用的api，官方的命名也很友善，只适用于Android的api通常叫XXXAndroid,同理只使用于iOS的通常叫XXXIOS，例如今天将介绍的ToastAndroid。但也有例外，例如BackHandler，只适用于Android平台，用于返回键处理的api，
React Native Cannot read property ‘map‘ of undefined
 104
React Native Cannot read property 'map' of undefined
android与React Native之间传递参数
ln1010的博客
 244
【代码】android与React Native之间传递参数。
React Native
啊阿啊啊啊杨的博客
 645
React与React Native。
BUUCTF-Real-[PHP]XXE
rx3225968517的博客
 392
BUUCTF-Real-[PHP]XXE漏洞复现！
Android状态栏/通知栏图标白底问题
通信侠的博客
 140
从android L版本开始，为了统一图标样式，会将通知栏、状态栏等显示图标处统一为白底或黑底，以促使开发人员规范图标设计。从现象看，状态栏会显示一个白底的方框；下拉通知栏展开时的图标为白底方框加圆框，不展开时为黑底方框。
Android Build 依赖项
最新发布
磨刀不误砍柴工
 230
在项目中的Build.Gradle文件中dependencies代码块中添加指定依赖项。有三种不同类型的依赖项。
react native 如何安装react-native-nfc-android
06-10
要在 React Native 中使用 NFC 功能，需要安装 react-native-nfc-android 模块。下面是安装步骤： 1. 首先确保已经安装了 React Native，可以使用以下命令来检查： ``` react-native --version ``` 2. 在项目目录下使用 npm 安装 react-native-nfc-android 模块： ``` npm install --save react-native-nfc-andro
530
由于项目需要，最近调研使用EChart，百度的这个项目真的是很不错，使用方便，接口清晰。今天就跟大家分享一下。使用方式EChart需要native-echarts库，所以一上来需要npm install native-echarts --save然后就可以在你的项目中使用了。废话不多说，我先上代码：import React, {Component} from 'react';import {App...
React Native网络请求学习笔记(Android版本)
奋斗小小鸟的专栏
 6495
概述 示例 效果 js端代码 注意事项 实现原理 原理概述 js端代码分析待完善 JNI端代码分析待完善 android端代码分析 代码下载地址 参考资料 概述 这篇文章首先会展示react native的一个简单的访问网络请求的例子。然后会分析代码的实现。 示例 效果 页面初始化的时候展示一个可点击的文本“点我测试网络”。 用户点击文本后，会访问网络和风天气api
JS状态容器—Redux与React-Redux及中间件使用
zcmain的专栏
 666
文章目录基础什么是Redux？安装Redux核心思想三大原则单一数据源State只读使用纯函数来执行修改ActionReducerStoreState的基本结构`React-Redux` 使用安装React Redux核心API讲解1. Provider2. connect完整示例代码扩展：1. 嵌套组件中访问Redux Store State2. 使用`combineReducers`合并多个零...
react native学习笔记22——常用API（4）ToastAndroid、BackHandler及特定平台代码常用写法
MrOnion的专栏
 1539
前言前面三节中介绍的React Native官方提供的api都是双平台通用的api，在React Native中也有一些只在特定平台才能使用的api，官方的命名也很友善，只适用于Android的api通常叫XXXAndroid,同理只使用于iOS的通常叫XXXIOS，例如今天将介绍的ToastAndroid。但也有例外，例如BackHandler，只适用于Android平台，用于返回键处理的api，
React Native Cannot read property ‘map‘ of undefined
 104
React Native Cannot read property 'map' of undefined
android与React Native之间传递参数
ln1010的博客
 244
【代码】android与React Native之间传递参数。
React Native
啊阿啊啊啊杨的博客
 645
React与React Native。
BUUCTF-Real-[PHP]XXE
rx3225968517的博客
 392
BUUCTF-Real-[PHP]XXE漏洞复现！
Android状态栏/通知栏图标白底问题
通信侠的博客
 140
从android L版本开始，为了统一图标样式，会将通知栏、状态栏等显示图标处统一为白底或黑底，以促使开发人员规范图标设计。从现象看，状态栏会显示一个白底的方框；下拉通知栏展开时的图标为白底方框加圆框，不展开时为黑底方框。
Android Build 依赖项
最新发布
磨刀不误砍柴工
 230
在项目中的Build.Gradle文件中dependencies代码块中添加指定依赖项。有三种不同类型的依赖项。
react native 如何安装react-native-nfc-android
06-10
要在 React Native 中使用 NFC 功能，需要安装 react-native-nfc-android 模块。下面是安装步骤： 1. 首先确保已经安装了 React Native，可以使用以下命令来检查： ``` react-native --version ``` 2. 在项目目录下使用 npm 安装 react-native-nfc-android 模块： ``` npm install --save react-native-nfc-andro

530
由于项目需要，最近调研使用EChart，百度的这个项目真的是很不错，使用方便，接口清晰。今天就跟大家分享一下。使用方式EChart需要native-echarts库，所以一上来需要npm install native-echarts --save然后就可以在你的项目中使用了。废话不多说，我先上代码：import React, {Component} from 'react';import {App...
React Native网络请求学习笔记(Android版本)
奋斗小小鸟的专栏
 6495
概述 示例 效果 js端代码 注意事项 实现原理 原理概述 js端代码分析待完善 JNI端代码分析待完善 android端代码分析 代码下载地址 参考资料 概述 这篇文章首先会展示react native的一个简单的访问网络请求的例子。然后会分析代码的实现。 示例 效果 页面初始化的时候展示一个可点击的文本“点我测试网络”。 用户点击文本后，会访问网络和风天气api
JS状态容器—Redux与React-Redux及中间件使用
zcmain的专栏
 666
文章目录基础什么是Redux？安装Redux核心思想三大原则单一数据源State只读使用纯函数来执行修改ActionReducerStoreState的基本结构`React-Redux` 使用安装React Redux核心API讲解1. Provider2. connect完整示例代码扩展：1. 嵌套组件中访问Redux Store State2. 使用`combineReducers`合并多个零...
react native学习笔记22——常用API（4）ToastAndroid、BackHandler及特定平台代码常用写法
MrOnion的专栏
 1539
前言前面三节中介绍的React Native官方提供的api都是双平台通用的api，在React Native中也有一些只在特定平台才能使用的api，官方的命名也很友善，只适用于Android的api通常叫XXXAndroid,同理只使用于iOS的通常叫XXXIOS，例如今天将介绍的ToastAndroid。但也有例外，例如BackHandler，只适用于Android平台，用于返回键处理的api，
React Native Cannot read property ‘map‘ of undefined
 104
React Native Cannot read property 'map' of undefined
android与React Native之间传递参数
ln1010的博客
 244
【代码】android与React Native之间传递参数。
React Native
啊阿啊啊啊杨的博客
 645
React与React Native。
BUUCTF-Real-[PHP]XXE
rx3225968517的博客
 392
BUUCTF-Real-[PHP]XXE漏洞复现！
Android状态栏/通知栏图标白底问题
通信侠的博客
 140
从android L版本开始，为了统一图标样式，会将通知栏、状态栏等显示图标处统一为白底或黑底，以促使开发人员规范图标设计。从现象看，状态栏会显示一个白底的方框；下拉通知栏展开时的图标为白底方框加圆框，不展开时为黑底方框。
Android Build 依赖项
最新发布
磨刀不误砍柴工
 230
在项目中的Build.Gradle文件中dependencies代码块中添加指定依赖项。有三种不同类型的依赖项。
react native 如何安装react-native-nfc-android
06-10
要在 React Native 中使用 NFC 功能，需要安装 react-native-nfc-android 模块。下面是安装步骤： 1. 首先确保已经安装了 React Native，可以使用以下命令来检查： ``` react-native --version ``` 2. 在项目目录下使用 npm 安装 react-native-nfc-android 模块： ``` npm install --save react-native-nfc-andro