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