我正在尝试为android
创建一个fabric
组件,特别是我想使用按钮组件的onClickHandler
,并通过RCTModernEventEmitter
向react-native
侧传递回调。它对iOS
很好,但对android来说,每次我点击button
,RCTModernEventEmitter
就会发出两次
这是我的规格
import type {HostComponent, ViewProps} from 'react-native';
import type {
DirectEventHandler
} 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 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());
// }
@Override
public void dispatchModern(RCTModernEventEmitter rctEventEmitter) {
super.dispatchModern(rctEventEmitter);
rctEventEmitter.receiveEvent(-1,
getViewTag(),getEventName(),
Arguments.createMap()
);
}
@Nullable
@Override
protected WritableMap getEventData() {
WritableMap event = Arguments.createMap();
event.putString("message", "MyMessage");
return event;
}
}
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()));
});
}
}
JS
侧
<MyButtonView
style={{height: 100, width: 100, margin: 20}}
onClickHandler={(value: any) => {
console.log('Hello ok bye', value.nativeEvent);
}}
text="Hello"
/>
即使我按了一次button
,我还是两次在MyButtonView
的onClickHandler
中得到value
Fullrepo在这里https://github.com/PritishSawant/ReactNativeFabricEventListenerExample
编辑:
我已经将我的代码更新为0.71.1,你可以在这里找到
通过dispatchModern评论super.dispatchModern(rctEventEmitter);
解决了问题