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

代碼導致下面的輸出。它變白了整個View組件，即使我指定的backgroundColor：「透明」

的錯誤，我總是得到的是這樣的： - 「視頻不能有任何的子視圖」

任何幫助將不勝感激:)。

Answer 1

視頻組件不能像您發現的那樣擁有子組件，但是您可以通過絕對定位它們來覆蓋視頻頂部的同級組件。從概念上講，這樣做的要點是：

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

退房世博VideoPlayer組件與自定義視頻控件的例子：https://github.com/expo/videoplayer。它可以讓你渲染像這樣的視頻播放器：