在 Touchable 中 React Native UI 组件包装答案

【问题标题】：React Native UI Component Wrap in Touchable在 Touchable 中 React Native UI 组件包装
【发布时间】：2018-08-20 12:31:45
【问题描述】：

我试图检测用户何时按下我编写的自定义 UI 组件（它显示视频源）。我已经尝试使用所有可触摸组件，并且理想情况下希望使用 TouchableWithoutFeedback 组件，但它们都没有检测到我的组件上的压力。此外，当我使用检查器选择我的组件时，我收到错误 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 组件，如果我做错了事，请提前道歉。

【问题讨论】：

标签： react-native react-native-native-ui-component touchablewithoutfeedback

【解决方案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;

【讨论】：