0

私が作成したカスタム 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 コンポーネントを実装しようとしたのはこれが初めてなので、間違ったことをしている場合は事前に謝罪してください。

4

1 に答える 1