react-native - 在 Touchable 中 React Native UI 组件包装
问题描述
我试图检测用户何时按下我编写的自定义 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 组件,所以如果我做错了事,请提前道歉。
解决方案
我找到了一个解决方案,它可能有点复杂,不是最好的做事方式,但它确实有效!
我更改了我的 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;
推荐阅读
- azure-active-directory - 使用 Auth0 作为 IDP 的 Azure B2B 直接联合
- html - 我们可以在css中将两条规则组合成一条规则吗?
- javascript - 如何使用 JavaScript 在特定单选按钮上应用条件
- terraform - 如何修复 terraform 远程状态和本地状态不匹配
- java - 用不同长度的行在Java中读取文件时出现问题
- javascript - 移动 Chrome 滚动顶部/动画不滚动
- laravel - 类 stdClass 的对象无法转换为字符串(查看:C:\wamp64\www\Application 1\resources\views\admin\soutenance\themeValide.blade.php)
- python - 为什么即使传递了错误的代理主机名,librdkafka 也不会抛出任何错误/异常?
- javascript - 如何创建自动递增*包括另一个输入*按钮?
- azure - 具有特定路径的 Databricks Notebook 上的 DevOps