React Native Fabric组件iOS端Native Command调用失败求助

针对你遇到的iOS端trigger命令无法生效的问题，新架构Fabric下的Native Command实现逻辑和老架构完全不同，不能沿用RCT_EXPORT_METHOD或老协议方式，以下是正确的实现步骤：

1. 确保Codegen配置与TS声明正确 #

首先在组件的TS spec文件中，通过codegenNativeComponent同时声明组件Props和Commands，让Codegen生成对应的原生接口：

import type { ViewProps } from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

export interface NativeProps extends ViewProps {
  text: string;
}

export interface NativeCommands {
  trigger: (viewTag: number) => void;
}

export default codegenNativeComponent<NativeProps, NativeCommands>(
  'RTNCenteredText'
);

执行pod install触发Codegen，生成iOS端的协议文件（如RTNCenteredTextSpec.h）。

2. iOS端实现命令处理与组件注册 #

步骤1：在View类中实现命令逻辑 #

修改RTNCenteredText.m，让View类直接实现命令方法：

#import "RTNCenteredText.h"
#import <React/RCTFabricViewComponentDescriptor.h>
#import <React/RCTFabricViewRegistry.h>

@implementation RTNCenteredText

// 实现trigger命令对应的逻辑
- (void)trigger {
  NSLog(@"iOS端捕获到trigger命令");
  // 这里添加你的命令执行逻辑
}

@end

步骤2：注册Component Descriptor并关联命令 #

创建组件描述类，将命令与View的方法绑定，并注册到Fabric组件注册表：

@interface RTNCenteredTextComponentDescriptor : RCTFabricViewComponentDescriptor
@end

@implementation RTNCenteredTextComponentDescriptor

+ (RCTComponentDescriptorProvider)componentDescriptorProvider {
  return ^RCTComponentDescriptor *{
    RCTFabricViewComponentDescriptor *descriptor = [[RCTFabricViewComponentDescriptor alloc] initWithComponentClass:RTNCenteredText.class];
    // 注册trigger命令，关联到View的trigger方法
    [descriptor addCommand:@"trigger" action:@selector(trigger)];
    return descriptor;
  };
}

@end

// 在AppDelegate.m的didFinishLaunchingWithOptions方法中注册组件描述
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // ...其他初始化代码
  [RCTFabricViewRegistry registerComponentDescriptorProvider:RTNCenteredTextComponentDescriptor.componentDescriptorProvider forComponentName:@"RTNCenteredText"];
  return YES;
}

3. 验证JS端调用正确性 #

确保JS端通过Codegen生成的Commands调用命令：

import RTNCenteredText, { Commands } from './RTNCenteredText';
import { useRef } from 'react';
import { Button } from 'react-native';

export default function App() {
  const textRef = useRef(null);

  const handleTrigger = () => {
    if (textRef.current) {
      Commands.trigger(textRef.current);
    }
  };

  return (
    <>
      <RTNCenteredText ref={textRef} text="测试文本" />
      <Button title="触发命令" onPress={handleTrigger} />
    </>
  );
}

关键注意事项 #

• 新架构下完全抛弃老架构的RCT_EXPORT_METHOD和RCTViewManager命令注册方式，必须通过Codegen+Fabric Component Descriptor实现命令绑定。
• 确保Podfile中已开启新架构配置（use_react_native!(:path => config["reactNativePath"], :new_arch_enabled => true)），且pod install已执行完成。
• 组件名称必须保持TS、iOS端代码、注册表中的一致性，否则命令无法关联到目标View。

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