React Native UI Touchable 中的组件包装

Question

我正在尝试检测用户何时按下我编写的自定义 UI 组件（它显示视频源）。我已经尝试使用所有可触摸组件，并且理想情况下想要使用 TouchableWithoutFeedback 组件，但是 none 它们检测到我的组件上的压力。此外，当我使用检查器 select 我的组件时，我收到错误 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 包装器更改为 return 一个视图，其中包含我的原生 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;

React Native UI Touchable 中的组件包装

React Native UI Component Wrap in Touchable

react-native

react-native-native-ui-component

touchablewithoutfeedback