有哪些替代RCTEventEmitter和RCTModernEventEmitter的选择？

Question

我正在尝试使用启用了fabric的新架构，在react-native中集成Native UI组件。

这是我的规范文件：

import type {HostComponent, ViewProps} from 'react-native';
import type {
  DirectEventHandler,
  BubblingEventHandler,
} from 'react-native/Libraries/Types/CodegenTypes';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

type Event = Readonly<{
  text?: string;
}>;

interface NativeProps extends ViewProps {
  text: string;
  onClickHandler?: DirectEventHandler<Event>; ////Event name should start with on
}

export default codegenNativeComponent<NativeProps>(
  'MyButtonView',
) as HostComponent<NativeProps>;

然后在本地端，我创建了以下文件

public class MyButtonViewManager extends SimpleViewManager<MyButtonView> {

    public static final String NAME = "MyButtonView";
    ReactApplicationContext mCallerContext;

    public MyButtonViewManager(ReactApplicationContext reactContext) {
        mCallerContext = reactContext;
    }

    @NonNull
    @Override
    public String getName() {
        return NAME;
    }

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

    @ReactProp(name = "text")
    public void setQrCodeText(MyButtonView view, String text) {
        view.setText(text);
    }
    

    @Nullable
    @Override
    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
        return MapBuilder.of("topOnClickHandler",
                MapBuilder.of("registrationName", "onClickHandler")
        );
    }

}


public class MyButtonView extends androidx.appcompat.widget.AppCompatButton {

    public MyButtonView(Context context) {
        super(context);
        configureViews();
    }

    private void configureViews(){
        setBackgroundColor(Color.YELLOW);
        setOnClickListener(view -> {
            ReactContext reactContext = (ReactContext)getContext();
            EventDispatcher eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(
                    reactContext ,getId()
            );
            eventDispatcher.dispatchEvent(new MyButtonClickEvent(getId()));
        });
    }
}

public class MyButtonClickEvent extends Event<MyButtonClickEvent> {

    public MyButtonClickEvent(int viewId) {
        super(viewId);
    }

    @Override
    public String getEventName() {
        return "topOnClickHandler";
    }

    @Override
    public void dispatch(RCTEventEmitter rctEventEmitter) {
        super.dispatch(rctEventEmitter);
        rctEventEmitter.receiveEvent(getViewTag(), getEventName(), Arguments.createMap());
    }

    @Nullable
    @Override
    protected WritableMap getEventData() {
        WritableMap event = Arguments.createMap();
        event.putString("message", "MyMessage");
        return event;
    }
}

dispatch和RCTEventEmitter都已被弃用，它们的替代方案是什么？我正研究RCTModernEventEmitter，但它也继承了废弃的RCTEventEmitter

此外，在Native Android端必须将事件名称从OnClickHandler更改为topOnClickHandler，否则会抛出hermes错误。不确定为什么要加上top前缀，为什么不能直接使用OnClickHandler。

- BraveEvidence

Answer 1

从 react-native 源代码 中：

这个 [RCTModernEventEmitter] 是 RCTEventEmitter 的过渡替代品，可以与 Fabric 和非 Fabric 渲染器一起使用。RCTEventEmitter 也可以与 Fabric 一起使用，但会有负面影响，应该避免使用。

您可以使用它作为目前可用的在 Fabric 中使用的替代品。

这个 [RCTModernEventEmitter] 接口将来会被删除，并被一个不需要旧的 receiveEvent 方法的新接口所取代。但是在可预见的未来，这是推荐使用的 EventEmitter 接口。

然而，长远来看，这将被移除。

根据您的使用情况，可能会有 ReactEventEmitter 可以帮助。

- Ekaansh Arora

---

谢谢。你有使用ReactEventEmitter的示例吗？我尝试使用RCTModernEventEmitter，但在receiveEvent函数中卡住了，不知道该传递什么surfaceId、canCoalesceEvent、customCoalesceKey和category参数。 - BraveEvidence