React-Native系列Android自定义原生UI组件

最新推荐文章于 2025-06-11 16:09:49 发布

原创

最新推荐文章于 2025-06-11 16:09:49 发布 · 9.9k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#android #RN #原生组件 #react

本文介绍了如何在React-Native中创建一个自定义的原生Android UI组件——CircleModule。通过详细步骤，展示了从初始化项目到实现CircleView，再到添加功能和JS交互的过程，最终实现通过JS控制Android组件的颜色和大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于官方的Android原生UI组件解释的并不是很完整，根据个人的不断摸索，终于成功完成原生组件的制作，所以写下这篇文章作为记录，也给让小白们少走些弯路。

我这里通过讲解制作一个绘圆组件的流程，来学习制作android原生UI组件。这个绘圆组件并没有实际的使用价值，只是为了更容易的了解android原生UI组件的制作过程。好了废话不多说，现在开始吧。

react-native版本：0.33.0

首先初始化react-native项目，最好能弄个VPN

react-native init AndroidNativeModule

初次build android项目，先打开虚拟机或连接手机。

react-native run-android

项目的创建就讲到这，详细的项目创建和排错请自行百度。现在我们用Android Stuido进入android项目。

创建基本的UI组件框架，这里组件名称严格更具功能进行命名，为了看的更清楚进行了一些打包
- CircleManager.java CIrcle原生组件管理器，实现JS和JAVA信息传递
- CircleView.java Circle原生组件
- MainPackage.java 自定义组件注册包

接下来给创建好的java添加基本结构，然后在后面更具需要添加细节功能

CircleView.java 基础结构

package com.androidnativemodule.module.circle;

import android.content.Context;
import android.view.View;

/**
 * 圆形组件组件基础类
 */
public class CircleView extends View {
   
   

    public CircleView(Context context) {
        super(context);
    }
}

UI组件继承于View类，这里没有加什么功能，就创建一个基本的类

CircleManager.java

package com.androidnativemodule.module.circle;

import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;

/**
 * 圆形组件基础类管理器
 */
public class CircleManager extends SimpleViewManager<CircleView> {
   
   

    /**
     * 设置js引用名
     * @return String
     */
    @Override
    public String getName() {
        return "MCircle";
    }

    /**
     * 创建UI组件实例
     * @param reactContext
     * @return CircleView
     */
    @Override
    protected CircleView createViewInstance(ThemedReactContext reactContext) {
        return new CircleView(reactContext);
    }
}

所有的组件管理器需要继承SimpleViewManager类，后面加上自己定义的组件基础类，下面2个方法是SimpleViewManager类的必须实现的方法，记住getName()返回的名字要和JS里的应用名进行统一。

MainPackge.java

package com.androidnativemodule;

import com.androidnativemodule.module.circle.CircleManager;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;