Question

我希望使用覆盖在视频播放顶部的自定义按钮渲染全屏视频播放（例如，我想使用TouchableOpacity渲染的刻度线/十字/圆圈）。我似乎无法向Video组件添加任何子组件。这是我想要做的： -

renderVideoPreview() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: 'transparent'
        }}
      >
        <Video
          source={{ uri: this.state.tempRecording }}
          rate={1.0}
          volume={1.0}
          muted={true}
          resizeMode="cover"
          shouldPlay
          isLooping
          style={{ flex: 1 }}
        >
          <View style={{
            backgroundColor: 'transparent'
          }}>
            <TouchableOpacity style={styles.circle}>

            </TouchableOpacity>
          </View>
        </Video>
      </View>
    );
  }

我试图将组件放在视频组件之外，但是没有实现我想要的组件。

renderVideoPreview() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: 'transparent'
        }}
      >
        <Video
          source={{ uri: this.state.tempRecording }}
          rate={1.0}
          volume={1.0}
          muted={true}
          resizeMode="cover"
          shouldPlay
          isLooping
          style={{ flex: 1 }}
        />
        <View style={{
          backgroundColor: 'transparent'
        }}>
          <TouchableOpacity style={styles.circle}>

          </TouchableOpacity>
        </View>
      </View>
    );
  }

代码导致以下输出。即使我指定了backgroundColor：'transparent'

，它也会使整个View组件变白

我总是得到的错误是： - ＆＃39;视频不能有任何子视图＆＃39;

任何帮助将不胜感激:)。

Answer 1

视频组件不具备您已发现的子组件，但您可以通过绝对定位来覆盖视频顶部的兄弟组件。从概念上讲，这个要点是：

render() {
  return (
    <View>
      <Video />
      <TouchableOpacity style={{ position: 'absolute' }}>
        <Text>Button</Text>
      </TouchableOpacity>
    </View>
  );
}

查看Expo VideoPlayer组件，了解自定义视频控件的示例：https://github.com/expo/videoplayer。它可以让你像这样呈现视频播放器：

Expo：React Native中VideoPlayer上的自定义按钮

1 个答案: