在不卸載的情況下更改原始視頻組件的父級

我試圖在使用react-native-video組件的反應本機中的iPhone上創建圖片功能。我有兩個元素，一個是視頻播放器，另一個是絕對位於播放器右下角的圖像。在不卸載的情況下更改原始視頻組件的父級

<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>

我想播放視頻，然後中旬播放，並能夠切換swapPip屬性，以使視頻現在是畫中畫和圖像是在主視圖。捕捉的是視頻必須在轉換過程中繼續順利進行。目前，每次交換都會重新安裝，導致視頻丟失並導致惱人的重新加載和其他不需要的副作用。這有可能實現嗎？

這是一個粗略的想法。灰色框代表視頻播放器，粉紅色代表圖像。點擊較小的盒子（無論顏色）會來回交換。任何時候都應允許交換，並且如果在交換過程中正好播放視頻，則不應以任何方式中斷播放。

來源

2016-11-01 Robby Allsopp

嘿，你可以請張貼你想要實現的圖片，只是爲了更好的理解 – Jickson

@Jickson，圖片添加 –

我想這竟然是一個愚蠢的問題，因爲zIndex實際上是react-native的事情了。它在docs和一切，恰好就像你所期望的：

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>

出於某種原因，我的印象是zIndex不存在/工作react-native下，你的元素的順序是唯一的方法完成分層...

來源

2016-11-02 16:30:57

在不卸載的情況下更改原始視頻組件的父級

回答

相關問題