防止阅读视频 react native

Question

我目前正在开发一个允许用户观看体育视频的应用程序，我想实现以下功能： 用户会看到一个视频列表，但如果他首先查看第一个视频，则只能看到下一个视频。目前，我只是在应该被阻止的视频的缩略图上添加了一个锁，但用户仍然可以点击一边播放视频。我查看了 react-native-video 包的所有道具，但没有看到任何适合我需要的道具。在 你有想法吗？

这里也是代码示例：

<View style={styles.videoRow}>
            <View>
              <Video
                style={styles.image}
                source={{uri: 'https://firebasestorage.googleapis.com/v0/b/roundpower-88ef9.appspot.com/o/BootyAbsPower%2FTuto%2013.mp4?alt=media&token=da011245-fce2-4796-a78b-3abc518c73ef'}}
                useNativeControls
                resizeMode="contain"
                isLooping
                onPlaybackStatusUpdate={(playbackStatus) => onPlaybackStatusUpdate3(playbackStatus)}
              />
              {!debloque3 ? <View>
                <FontAwesome5 name="lock" size={40} color="white" style={styles.icon}/>
              </View> : <Text>''</Text>}

            </View>
            <View>
              <Video
                style={styles.image}
                source={{uri: 'https://firebasestorage.googleapis.com/v0/b/roundpower-88ef9.appspot.com/o/BootyAbsPower%2FTuto%2014.mp4?alt=media&token=cd3d12be-05fd-4fc4-91d9-cd518faf14ce'}}
                useNativeControls
                resizeMode="contain"
                isLooping
                onPlaybackStatusUpdate={(playbackStatus) => onPlaybackStatusUpdate4(playbackStatus)}
              />
              {!debloque4 ? <View>
                <FontAwesome5 name="lock" size={40} color="white" style={styles.icon}/>
              </View> : <Text>''</Text>}
            </View>
          </View>

Answer 1

是的，一个非常简单的方法就是阻止你不想让用户点击的东西接收任何pointerEvents（即触摸事件）。

这样做的一个非常简单的快速和肮脏的方式：

import * as React from 'react';
import {TouchableOpacity, StyleSheet, View} from 'react-native';

const onPress = () => console.error("I don't want this to happen.");

export default () => (
  <View style={[StyleSheet.absoluteFill, styles.center]}>
    {/* red box in the middle */}
    <View style={{width: 50, height: 50, backgroundColor: 'red'}}>
      <TouchableOpacity
        onPress={onPress}
        style={StyleSheet.absoluteFill}
      />
      {/* Obscure the TouchableOpacity with a View which completely covers it */}
      {shouldPreventTouches && <View style={StyleSheet.absoluteFill} />}
    </View>
  </View>
);

或者，您也可以将<Video /> 组件包装在<View /> 和useState 中，以在pointerEvents="none" 和pointerEvents="auto" 之间切换。两者都具有相同的防止触摸信息传递给孩子的效果：

import * as React from 'react';
import {TouchableOpacity, StyleSheet, View} from 'react-native';

const onPress = () => console.error("I don't want this to happen.");

export default () => (
  <View style={[StyleSheet.absoluteFill, styles.center]}>
    {/* red box in the middle */}
    <View
      pointerEvents={shouldPreventTouches ? 'none' : 'auto'}
      style={{width: 50, height: 50, backgroundColor: 'red'}}>
      <TouchableOpacity
        onPress={onPress}
        style={StyleSheet.absoluteFill}
      />
    </View>
  </View>
);

看你喜欢什么。

Answer 2

您可以重复使用在视频元素上显示或不显示锁定的逻辑，并仅在视频解锁时呈现视频。

    <View>
    {
        debloque ? <Video/> : <FontAwesome5 name="lock" size={40} color="white" style={styles.icon} />
    }
    </View>

或者，根据the docs，您可以将视频源设置为 null 直到它被解锁，以初始化播放器但阻止播放任何内容。