Ändern der Eltern von reagieren nativen Video-Komponente ohne unmounten

Question

Ich versuche, Bild in Bild-Funktionalität auf dem iPhone in native mit der react-native-video Komponente zu erstellen. Ich habe zwei Elemente, eines ist der Videoplayer, und das andere ist ein Bild, das absolut oben auf dem Player in der unteren rechten Ecke positioniert ist.

<View style={{ position: 'relative' }}> 
    <View> 
     { this.props.swapPip ? renderVideoPlayer() : renderPip() } 
    </View> 
    <View style={{ position: 'absolute', bottom: 16, right: 16 }}> 
     { this.props.swapPip ? renderPip() : renderVideoPlayer() } 
    </View> 
</View> 

Ich mag würde das Video spielen, und dann Mitte zu spielen, und in der Lage, die swapPip Eigenschaft zu wechseln, so dass das Video jetzt das Pip ist und das Bild in der Hauptansicht. Der Catch ist das Video muss weiterhin reibungslos durch den Übergang spielen. Momentan wird es jedes Mal erneut installiert, wenn der Austausch stattfindet, wodurch das Video verloren geht und ein lästiges Nachladen und andere unerwünschte Nebenwirkungen verursacht werden. Ist das möglich?

Hier ist ein grobes Bild der Idee. Die grauen Kästchen stehen für den Videoplayer, das Rosa für das Bild. Durch Klicken auf die kleinere Box (egal welche Farbe) werden die beiden vor und zurück getauscht. Der Austausch sollte jederzeit erlaubt sein, und wenn während eines Tauschs ein Video abgespielt wird, sollte die Wiedergabe in keiner Weise unterbrochen werden.

Answer 1

Ich denke, dies ist eine dumme Frage zu sein, stellte sich heraus, weil zIndex eigentlich ein Ding in react-native jetzt ist. Seine in der docs und alles, und funktioniert genau wie man es erwarten würde:

const pipPosition = { position: 'absolute', bottom: 16, right: 16, zIndex: 99 }; 
const sourceAPosition = this.props.swapPip ? pipPosition : {}; 
const sourceBPosition = !this.props.swapPip ? pipPosition : {}; 

<View style={{ position: 'relative' }}> 
    <View style={sourceAPosition}> 
     { renderSourceA() } 
    </View> 
    <View style={sourceBPosition}> 
     { renderSourceB() } 
    </View> 
</View> 

Aus irgendeinem Grund, den ich hatte den Eindruck, zIndex nicht existierte/Arbeit in react-native, und dass die Reihenfolge Ihrer Elemente war der einzige Weg, Schichtung zu erreichen ...