React Native调用Android的原生功能

React Native 通过 JavaScript 接口与原生代码通信,这是通过名为 Bridge 的机制实现的。Bridge 负责在 JavaScript 和原生端之间建立通信桥梁。

以下是调用 Android 原生功能的基本步骤:

在 JavaScript 中,使用 React Native 提供的模块创建一个接口。

这个接口会被编译成 Java 或 Kotlin 代码,并在 Android 项目的 android/app/src/main/java/<你的包名>/ 目录下的相应 Module 中实现。

实现原生功能的具体代码。

通过 Bridge 将原生功能暴露给 JavaScript。

例如,如果你想要调用 Android 的 Toast 功能,你可以创建一个名为 ToastExample 的模块:

java 复制代码
// ToastExample.java

package com.yourpackage;

import android.widget.Toast;
import android.content.Context;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.module.annotations.ReactModule;

@ReactModule(name = ToastExampleModule)
public class ToastExample extends ReactContextBaseJavaModule {

    ToastExample(ReactApplicationContext context) {
        super(context);
    }

    @Override
    public String getName() {
        return "ToastExample";
    }

    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }
}

然后在 JavaScript 中这样使用:

javascript 复制代码
import { NativeModules } from 'react-native';

NativeModules.ToastExample.show('Hello, World!', NativeModules.ToastExample.LENGTH_LONG);

这个例子中,我们创建了一个名为 ToastExample 的模块,并在其中定义了一个 show 方法,该方法通过调用 Android 的 Toast 功能来显示一条消息。然后在 JavaScript 中,我们通过 NativeModules.ToastExample.show 调用这个方法。

相关推荐
。puppy22 分钟前
MySQL 远程登录实验:通过 IP 地址跨机器连接实战指南
android·adb
甜鲸鱼38 分钟前
Java与MySQL中的枚举(Enum)
java·mysql
xxxxxxllllllshi38 分钟前
【LeetCode Hot100----14-贪心算法(01-05),包含多种方法,详细思路与代码,让你一篇文章看懂所有!】
java·数据结构·算法·leetcode·贪心算法
pengzhuofan42 分钟前
Sentinel 服务保护
java·微服务·sentinel
6***379444 分钟前
Java安全
java·开发语言·安全
dongdeaiziji1 小时前
深入理解 Kotlin 中的构造方法
android·kotlin
QQRRRRW1 小时前
Tailwind+VScode (Vite + React + TypeScript) 原理与实践
vscode·react.js·typescript
豐儀麟阁贵1 小时前
8.1 异常概述
java·开发语言
风起云涌~1 小时前
【Android】浅谈Navigation
android
游戏开发爱好者81 小时前
iOS 商店上架全流程解析 从工程准备到审核通过的系统化实践指南
android·macos·ios·小程序·uni-app·cocoa·iphone