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

问题描述：

我想要使用覆盖在视频播放顶部的自定义按钮（例如我想要使用TouchableOpacity渲染的刻度线/十字架/圆圈）呈现全屏视频播放。我似乎无法将任何子组件添加到视频组件。这就是我要做的： -Expo：React Native中的VideoPlayer上的自定义按钮

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

代码导致下面的输出。它变白了整个View组件，即使我指定的backgroundColor：“透明”

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

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

答

视频组件不能像您发现的那样拥有子组件，但是您可以通过绝对定位它们来覆盖视频顶部的同级组件。从概念上讲，这样做的要点是：

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

退房世博VideoPlayer组件与自定义视频控件的例子：https://github.com/expo/videoplayer。它可以让你渲染像这样的视频播放器：

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

相关推荐