Question

我试图检测用户何时按下了我编写的自定义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组件，因此如果我做错了事，请提前道歉。

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;

在可触摸状态下反应本机UI组件包装

1 个答案: