React Native 0.71.x导入Swift原生iOS视图失败：requireNativeComponent未找到

带有requireNativeComponent的错误在StackOverflow上十分常见，大多通过删除Pods、重新执行pod install并编译就能解决，但这些方法对我无效。我尝试将一个Swift编写的简单视图集成到React Native 0.71.x项目中，相关代码如下，仍出现错误：Invariant Violation: requireNativeComponent: "TestViewManager" was not found in the UIManager。求指出操作有误的地方。

iOS Swift代码：TestViewManager.swift #

import Foundation
import UIKit

@objc (TestViewManager)
class TestViewManager: RCTViewManager {
  override func view() -> UIView! {

    let label = UILabel()
    label.text = "Hello from parent"
    label.sizeToFit()
    label.textAlignment = .center
    label.textColor = .link
    
    return label
  }
  
  override static func requiresMainQueueSetup() -> Bool {
    return true
  }
  
}

Objective-C实现文件：TestViewManager.m #

#import <Foundation/Foundation.h>

#import "React/RCTBridgeModule.h"
#import "React/RCTViewManager.h"

@interface RCT_EXTERN_MODULE(TestViewManager, RCTViewManager);

@end

React Native端代码：TestView.js #

import React, {Component} from 'react';
import {requireNativeComponent} from 'react-native';

const RNTestView = requireNativeComponent('TestViewManager');

export default class TestView extends Component {
    render() {
        return <RNTestView />;
    }
}

问题排查与解决 #

你这里的核心问题是Native组件名称不匹配、视图注册不完整，按以下步骤修正：

1. 修正RN端调用的组件名称
   RCTViewManager暴露给RN的组件名默认是类名去掉Manager后缀——你的TestViewManager对应的RN组件名应该是TestView，而非TestViewManager。JS代码需修改为：

   const RNTestView = requireNativeComponent('TestView');
   

2. 完善Objective-C端的视图注册
   RCTViewManager必须至少导出一个属性/事件，RN才能正确识别该视图组件。修改TestViewManager.m：

   #import <Foundation/Foundation.h>
   #import "React/RCTBridgeModule.h"
   #import "React/RCTViewManager.h"
   
   RCT_EXTERN_MODULE(TestViewManager, RCTViewManager)
   // 添加占位属性（即使暂时不用，也要保证注册逻辑完整）
   RCT_EXPORT_VIEW_PROPERTY(placeholder, NSString)
   

3. 检查Xcode项目配置

   • 确认TestViewManager.swift和TestViewManager.m都在Xcode项目的Compile Sources列表中（路径：Target -> Build Phases -> Compile Sources）；
   • 清理Xcode缓存：按Cmd+Shift+K，关闭Xcode后删除项目根目录的ios/build文件夹，重新执行pod install再编译。

4. 验证组件注册状态
   在RN端打印UIManager的注册列表，确认组件是否成功注册：

   import {UIManager} from 'react-native';
   console.log(UIManager.getViewManagerConfig('TestView'));
   

   若能打印出配置信息，说明注册成功。

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