android - Expo:React Native 中 VideoPlayer 上的自定义按钮

Question

我想渲染全屏视频播放，自定义按钮覆盖在视频播放之上(例如我想使用 TouchableOpacity 渲染的刻度线/十字/圆圈)。我似乎无法向视频组件添加任何子组件。这是我正在尝试做的事情:-

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 组件变白

我总是遇到这样的错误:- '视频不能有任何 subview '

如有任何帮助，我们将不胜感激:)。

Answer 1

视频组件不能有子组件，正如您所发现的，但您可以通过绝对定位将同级组件覆盖在视频之上。从概念上讲，要点是:

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

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