在 React Native Android 上定义自定义原生事件

Posted 2023-05-07

【中文标题】在 React Native Android 上定义自定义原生事件

【英文标题】：Defining a custom native event on React Native Android

【发布时间】：2017-02-13 19:24:22

【问题描述】：

我正在尝试在 android 上的 React Native 应用程序中定义一个自定义事件。我有原生视图，它有一个原生按钮。当按下按钮时，我想向我的 React Native 组件发送一条消息以显示模态屏幕。

我已经按照示例进行了操作，但并不了解所有元素，并且在尝试中做了一些猜测。

在我的 ViewManager 类中：

public class MyViewManager extends SimpleViewManager<MyView> 

    // Contructor etc...

    @Override
    protected MyView createViewInstance(ThemedReactContext themedReactContext) 
        //... Create and return the view 
    

    /**
     * Custom native events
     * @return Map of additional events
     */
    @Override
    public @Nullable
    Map getExportedCustomDirectEventTypeConstants() 
        return MapBuilder.of(
                "showModal",
                MapBuilder.of("registrationName", "onPressModalButton")
        );
    

自定义视图：

public class MyView extends View 

    public MyView(Context c)
    
        super(c);
    

    public void showModal() 
        Log.d("MyView", "showModal");

        WritableMap event = Arguments.createMap();
        event.putString("showModal", "onPressModalButton");
        ReactContext reactContext = (ReactContext)getContext();
        reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                getId(),
                "showModal", 
                event);
    

所以我希望，每次调用 showModal 时，为了触发一个 JS 事件，我可以在 React Native 应用程序中显示一个模式视图。

在我的 React 组件中，我有：

  class MyNativeComponent extends React.Component 
    static propTypes = 
      ...View.propTypes,
      onPressModalButton: React.PropTypes.func
    
    render() 
      return <MyView ...this.props />
    
  

  const MyView = requireNativeComponent('MyView', MyNativeComponent,  nativeOnly: showModal: true )

  class MyComponent extends React.Component 
    constructor(props) 
      super(props);
      this._showModal = this._showModal.bind(this);
    

    _showModal(event: Event) 

      console.log("showModal from React!")
        if (!this.props.onPressModalButton) 
          return;
        
      this.props.onPressModalButton(event.nativeEvent.showModal);
    

    //...
  

我不明白映射是如何工作的，以及我如何定义事件（如example 中的 onChange）。

【问题讨论】：

感谢这篇文章为我指明了正确的方向。 I've tried to put together a comprehensive solution on a related post.

你好，你是用什么方法添加SetOnclickListener的？

【参考方案1】：

好吧，我没有展示我的render 方法，这就是缺少的部分。我错过了在事件处理方法中传递的道具，在这种情况下onPressModalButton=this_.showModal：

render() 
  return (
    <View style=styles.container>
      < MyNativeComponent style=flex: 1 onPressModalButton=this._showModal />
    </View>
  )