在不卸载的情况下更改原始视频组件的父级

我试图在使用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

在不卸载的情况下更改原始视频组件的父级

回答

相关问题