在可觸摸的React Native UI組件包裝中

Question

我試圖檢測用戶何時按下了我編寫的自定義UI組件（它將顯示視頻供稿）。 我嘗試使用所有可觸摸組件，並且理想情況下希望使用TouchableWithoutFeedback組件，但是沒有一個組件能夠檢測到我組件上的按壓。 另外，當我用檢查器選擇組件時，出現“ Expected to find at least one React renderer的錯誤Expected to find at least one React renderer但是我不確定如何正確設置組件以具有渲染器。

本機UI組件：

public class DroneVideoFeedManager extends SimpleViewManager<DroneVideoFeed> {

  @Override
  public String getName() {
    return "DroneLiveVideo";
  }

  @Override
  public DroneVideoFeed createViewInstance(ThemedReactContext context) {
    return new DroneVideoFeed(context, null);
  }
}

我的UI組件Javascript包裝器如下：

import PropTypes from 'prop-types';
import {
  requireNativeComponent,
  ViewPropTypes,
} from 'react-native';

const iface = {
  name: 'DroneLiveVideo',
  propTypes: {
    resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch']),
...ViewPropTypes, // include the default view properties
  },
};

module.exports = requireNativeComponent('DroneLiveVideo', iface);

我試圖檢測新聞：

<TouchableWithoutFeedback
  onPress={() => console.log('pressed!')}
>
  <DroneLiveView
    style={{
      width: '100%',
      height: '100%',
    }}
  />
</TouchableWithoutFeedback>

這是我第一次嘗試在React Native中實現本機UI組件，因此如果我做錯了事，請提前道歉。

Answer 1

我找到了一個解決方案，它可能有點令人費解，但這並不是最佳的工作方式，但是它可行！

我更改了JavaScript包裝程序，以返回帶有本機UI組件的視圖，以及位於其之上的另一個視圖（使用絕對定位）。 該視圖似乎可以處理觸摸，並允許可觸摸對象與我的組件一起使用。

我更改的UI組件包裝如下：

import React, {
  Component,
} from 'react';

import {
  requireNativeComponent,
  View,
} from 'react-native';

class DroneVideo extends Component<{}> {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View
        {...this.props}
      >

        <View
          style={{
            width: '100%',
            height: '100%',
            position: 'absolute',
            zIndex: 2,
          }}
        ></View>

        <DroneVideoNative
          style={{
            width: '100%',
            height: '100%',
            position: 'absolute',
            zIndex: 1,
          }}
        />

      </View>

    );
  }
}

let DroneVideoNative = requireNativeComponent('DroneLiveVideo', DroneVideo);

export default DroneVideo;