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

Question

我想渲染全屏视频播放，自定义按钮覆盖在视频播放之上（例如，我想使用 TouchableOpacity 渲染的勾号 mark/cross/circle）。我似乎无法向视频组件添加任何子组件。这是我正在尝试做的事情：-

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

我总是得到的错误是：- 'Video cannot have any subviews'

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

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 上的自定义按钮

Expo: Custom buttons on VideoPlayer in React Native

video

android

ios

react-native

expo