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

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>
    );
  }

我试图将组件放在 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>
      </View>
    );
  }

该代码导致以下输出。即使我指定了 backgroundColor: 'transparent'，它也会使整个 View 组件变白

我总是得到的错误是：- “视频不能有任何子视图”

任何帮助，将不胜感激 ：）。

Answer 1

正如您所发现的，视频组件不能有子组件，但是您可以通过绝对定位它们来覆盖视频顶部的兄弟组件。从概念上讲，其要点是：

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

查看 Expo VideoPlayer 组件以获取自定义视频控件示例：https : //github.com/expo/videoplayer。它可以让您像这样渲染视频播放器：