加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

在React Native Android上定义自定义本机事件

发布时间:2020-12-15 16:14:42 所属栏目:百科 来源:网络整理
导读:我正在尝试在 Android上的React Native应用程序中定义自定义事件.我有本机View,它有一个原生Button.按下按钮时,我想向我的React Native Component发送一条消息,以显示模态屏幕. 我已经按照这些例子但不了解所有元素,并且在我的尝试中做了一些猜测. 在我的Vie
我正在尝试在 Android上的React Native应用程序中定义自定义事件.我有本机View,它有一个原生Button.按下按钮时,我想向我的React Native Component发送一条消息,以显示模态屏幕.

我已经按照这些例子但不了解所有元素,并且在我的尝试中做了一些猜测.

在我的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).

解决方法

好吧,我没有展示我的渲染方法,那就是缺失的部分.我错过了传递事件处理方法的道具,在本例中是onPressModalButton = {this_.showModal}:

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读