react-native - 在不卸载的情况下更改React Native Video组件的父级

Question

我正在尝试使用react-native-video组件在iPhone native 中创建画中画功能。我有两个元素，一个是视频播放器，另一个是绝对位于播放器顶部右下角的图像。

<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属性，以便视频现在是点子，图像位于主 View 中。要注意的是，在过渡期间，视频必须继续流畅地播放。目前，每次交换发生时，它都会重新安装，从而丢失视频并导致烦人的重新加载和其他不良后果。这有可能实现吗？

这是该想法的粗略图像。灰色框代表视频播放器，粉红色框代表图像。单击较小的框(任何颜色)将来回交换两个。任何时候都应允许交换，并且如果在交换过程中碰巧正在播放视频，则不应以任何方式中断播放。

Answer 1

我猜这原来是一个愚蠢的问题，因为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中不存在/不起作用，并且元素的顺序是完成分层的唯一方法...