当前位置：首页 > news >正文

React Native 集成原生Android功能

news 2025/7/8 22:18:18

React Native 集成原生功能完整指南

前言

在 React Native 开发中，我们经常需要使用设备的原生功能，比如蓝牙、打印机等。本文将以集成打印机功能为例，详细介绍如何在 React Native 项目中集成 Android 原生功能。

集成步骤概述

创建原生模块（Native Module）
创建包装类（Package）
在 Android 项目中注册 Package
在 JavaScript/TypeScript 端创建接口 (非必须)
在 React Native 代码中调用原生功能

详细实现

1. 创建原生模块

首先需要创建一个继承自 ReactContextBaseJavaModule 的类。
这个类的主要作用是：

建立 RN 和原生代码之间的通信桥接
提供原生功能的具体实现
通过注解暴露方法给 JS 调用

public class ZICOXModule extends ReactContextBaseJavaModule {@Overridepublic String getName() {return "ZICOXPrint"; // 在JS中通过 NativeModules.ZICOXPrint 调用}@ReactMethodpublic void print(String text, Promise promise) {// 打印功能实现try {// 打印逻辑promise.resolve(true);} catch (Exception e) {promise.reject("PRINT_ERROR", e.getMessage());}}
}

其中getName() 返回值是暴露给js调用的模块名称
@ReactMethod 是暴露给js调用的方法

2. 创建包装类

包装类作为模块的容器，负责：

管理和注册原生模块
控制模块的生命周期
提供模块列表给 RN 系统

public class ZICOXPackage implements ReactPackage {@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {List<NativeModule> modules = new ArrayList<>();modules.add(new ZICOXModule(reactContext));return modules;}@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {return Collections.emptyList();}
}

3. 注册 Package

在 Android 项目的 MainApplication.java 中注册包装类，使 RN 能够识别和加载这些原生模块：

public class MainApplication extends Application implements ReactApplication {@Overrideprotected List<ReactPackage> getPackages() {List<ReactPackage> packages = new PackageList(this).getPackages();packages.add(new ZICOXPackage()); // 添加自定义Packagereturn packages;}
}

4. 创建 TypeScript 接口

为了更好地使用原生功能，我们需要在 JS 端创建对应的接口和包装器：

// 定义接口
interface ZICOXPrinterInterface {print(text: string): Promise<boolean>;connect(address: string): Promise<void>;
}// 声明模块
declare module 'react-native' {interface NativeModulesStatic {ZICOXPrint: ZICOXPrinterInterface;}
}// 创建包装器
import { NativeModules } from 'react-native';const { ZICOXPrint } = NativeModules;export const ZICOXPrinter = {async print(text: string): Promise<boolean> {try {return await ZICOXPrint.print(text);} catch (error) {console.error('打印失败:', error);throw error;}},// ... 其他方法
};

5. 在 React 组件中使用

最后，我们可以在 React 组件中方便地调用这些原生功能：

import React from 'react';
import { Button } from 'react-native';
import { ZICOXPrinter } from '../native/ZICOXPrinter';export const PrintButton: React.FC = () => {const handlePrint = async () => {try {await ZICOXPrinter.connect('printer_address');const result = await ZICOXPrinter.print('要打印的内容');if (result) {console.log('打印成功');}} catch (error) {console.error('操作失败:', error);}};return <Button title="打印" onPress={handlePrint} />;
};