在 React Native 中使用 react-native-video
播放视频时,如果你想在视频播放区域禁用 TouchableOpacity
,可以通过一些技巧来实现。以下是一个示例,展示了如何在视频播放区域禁用 TouchableOpacity
。
首先,确保你已经安装了 react-native-video
:
npm install react-native-video
然后,你可以使用以下代码来实现禁用 TouchableOpacity
的功能:
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import Video from 'react-native-video';
const App = () => {
const [isVideoTouched, setIsVideoTouched] = useState(false);
const handleVideoPress = () => {
setIsVideoTouched(true);
setTimeout(() => {
setIsVideoTouched(false);
}, 1000); // 1秒后重新启用TouchableOpacity
};
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.videoContainer}
activeOpacity={1}
onPress={handleVideoPress}
>
<Video
source={{ uri: 'https://www.w3schools.com/html/mov_bbb.mp4' }}
style={styles.video}
controls={true}
resizeMode="contain"
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
disabled={isVideoTouched}
onPress={() => alert('Button Pressed')}
>
<Text style={styles.buttonText}>Press Me</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
videoContainer: {
width: '100%',
height: 200,
backgroundColor: 'black',
},
video: {
width: '100%',
height: '100%',
},
button: {
marginTop: 20,
padding: 10,
backgroundColor: 'blue',
},
buttonText: {
color: 'white',
},
});
export default App;
useState
钩子来管理 isVideoTouched
状态,该状态用于跟踪视频区域是否被点击。TouchableOpacity
包裹 Video
组件,并设置 activeOpacity
为 1
,以确保点击时没有视觉反馈。onPress
事件中调用 handleVideoPress
函数,该函数会将 isVideoTouched
状态设置为 true
,并在 1 秒后重新设置为 false
。TouchableOpacity
创建一个按钮,并将其 disabled
属性绑定到 isVideoTouched
状态。isVideoTouched
为 true
时,按钮将被禁用,无法点击。领取专属 10元无门槛券
手把手带您无忧上云