React Native UI Component Wrap в Touchable

Question

Я пытаюсь определить, когда пользователь нажимает на пользовательский компонент пользовательского интерфейса, который я написал (он отображает видео канал). Я попытался использовать все сенсорные компоненты и в идеале хотел бы использовать компонент TouchableWithoutFeedback, но ни один из них не обнаруживает нажатия на мой компонент. Кроме того, когда я выбираю свой компонент с помощью инспектора, я получаю сообщение об ошибке Expected to find at least one React renderer но я не уверен, как правильно настроить мой компонент для рендеринга.

Нативный компонент пользовательского интерфейса:

public class DroneVideoFeedManager extends SimpleViewManager<DroneVideoFeed> {

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

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

Мой компонент пользовательского интерфейса 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, поэтому заранее извиняюсь, если я что-то делаю неправильно.

Answer 1

Я нашел решение, возможно, оно немного запутанное и не лучший способ сделать что-то, но это работает!

Я изменил свою оболочку javascript, чтобы она возвращала представление с моим собственным компонентом пользовательского интерфейса и другое представление над ним (с использованием абсолютного позиционирования). Этот вид, кажется, обрабатывает прикосновения и позволяет touchables работать с моим компонентом.

Моя измененная оболочка компонента пользовательского интерфейса выглядит следующим образом:

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;