Expo: Benutzerdefinierte Schaltflächen auf VideoPlayer in React Native

Question

Ich möchte eine Vollbild-Videowiedergabe mit benutzerdefinierten Schaltflächen über der Videowiedergabe überlagert (z. B. ein Häkchen/Kreuz/Kreis, die ich mit der TouchableOpacity rendern möchte). Ich kann anscheinend keine Unterkomponenten zur Videokomponente hinzufügen. Hier ist, was ich zu tun versucht: -

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

Ich habe versucht, die Komponenten außerhalb der Video-Komponente zu setzen, aber das hat nicht zu erreichen, was ich wollte es.

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

Der Code führte zu der folgenden Ausgabe. es weiß sogar die ganze View-Komponente aus, obwohl ich die Backgroundcolor festgelegt: ‚transparent‘

Der Fehler habe ich immer, ist dies: -

Jede Hilfe ‚Video kann keine Subviews haben‘ würde geschätzt werden :).

Answer 1

Die Videokomponente kann keine untergeordneten Komponenten haben, wie Sie festgestellt haben, aber Sie können Geschwisterkomponenten oben auf dem Video überlagern, indem Sie sie absolut positionieren. Konzeptionell ist der Kern ist dies:

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

Schauen Sie sich die Expo Videoplayer-Komponente für ein Beispiel mit benutzerdefinierten Video-Kontrollen: https://github.com/expo/videoplayer. So können Sie Video-Player wie folgt rendern: