如何在React Native原生模块中导入并重载现有组件？附iOS/Android指南

一、JS层封装（跨平台通用） #

先封装一层JS组件，保留原生Text的所有props，同时注入自定义属性供原生层接收：

import React from 'react';
import { Text as RNText, TextProps } from 'react-native';

// 合并原生Text props与自定义props类型
type CustomTextProps = TextProps & {
  customNativeProp?: string;
};

const CustomText = (props: CustomTextProps) => {
  const { customNativeProp, ...restProps } = props;
  // 透传原生props，同时传递自定义属性
  return <RNText {...restProps} customNativeProp={customNativeProp} />;
};

export default CustomText;

二、iOS原生实现 #

1. 创建自定义Text组件类 #

在iOS项目的ios目录下新建两个文件：

RCTCustomText.h

#import <React/RCTViewManager.h>
#import <React/RCTText.h>

@interface RCTCustomText : RCTText
@property (nonatomic, copy) NSString *customNativeProp;
@end

@interface RCTCustomTextManager : RCTViewManager
@end

RCTCustomText.m

#import "RCTCustomText.h"

@implementation RCTCustomText

- (void)setCustomNativeProp:(NSString *)customNativeProp {
  _customNativeProp = customNativeProp;
  // 这里写你的原生逻辑，示例：根据参数修改文本颜色
  if ([customNativeProp isEqualToString:@"red"]) {
    self.textColor = [UIColor redColor];
  } else {
    self.textColor = [UIColor blackColor];
  }
  NSLog(@"iOS 接收自定义props: %@", customNativeProp);
}

@end

@implementation RCTCustomTextManager

RCT_EXPORT_MODULE(CustomText)
// 导出自定义props，让RN框架识别
RCT_EXPORT_VIEW_PROPERTY(customNativeProp, NSString)

// 返回自定义Text实例，继承原生RCTText的所有功能
- (UIView *)view {
  return [[RCTCustomText alloc] init];
}

@end

2. 组件注册 #

无需额外手动注册，RCT_EXPORT_MODULE会自动让RN框架识别该组件。

三、Android原生实现 #

1. 创建自定义Text管理器类 #

在Android项目的android/app/src/main/java/com/[你的项目包名]/目录下新建CustomText.java：

package com.yourprojectname; // 替换为你的项目包名

import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.views.text.ReactTextView;

public class CustomTextManager extends SimpleViewManager<ReactTextView> {

    @Override
    public String getName() {
        return "CustomText"; // 与JS层组件名对应
    }

    @Override
    protected ReactTextView createViewInstance(ThemedReactContext reactContext) {
        return new ReactTextView(reactContext);
    }

    // 绑定自定义props，处理原生逻辑
    @ReactProp(name = "customNativeProp")
    public void setCustomNativeProp(ReactTextView view, String customNativeProp) {
        if ("red".equals(customNativeProp)) {
            view.setTextColor(view.getContext().getResources().getColor(android.R.color.holo_red_dark));
        } else {
            view.setTextColor(view.getContext().getResources().getColor(android.R.color.black));
        }
        android.util.Log.d("CustomText", "Android 接收自定义props: " + customNativeProp);
    }
}

2. 注册组件 #

步骤1：创建自定义Package类

新建CustomPackage.java：

package com.yourprojectname;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class CustomPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        List<ViewManager> viewManagers = new ArrayList<>();
        viewManagers.add(new CustomTextManager());
        return viewManagers;
    }
}

步骤2：在MainApplication中注册Package

修改MainApplication.java：

import com.yourprojectname.CustomPackage; // 导入自定义Package

@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new CustomPackage()); // 添加自定义Package
    return packages;
}

四、使用自定义组件 #

在JS代码中直接导入使用，既保留原生Text的所有特性，又能使用自定义props：

import CustomText from './CustomText';
import { View } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <CustomText customNativeProp="red" style={{ fontSize: 24 }}>
        原生修改的红色文本
      </CustomText>
      <CustomText style={{ fontSize: 24, marginTop: 20 }}>
        默认样式文本
      </CustomText>
    </View>
  );
};

export default App;

注意事项 #

• 自定义props的名称需在JS、iOS、Android三层保持完全一致，否则原生层无法接收。
• 若需添加更复杂的交互（如回调事件），可在原生层集成RN的事件发射器（iOS用RCTBubblingEventEmitter，Android用ReactContext的事件回调）。
• 不建议直接覆盖原生Text组件的注册名，避免影响其他依赖原生Text的代码，使用自定义组件名更安全。

内容的提问来源于stack exchange，提问作者Yeummy