Question

我正在尝试使用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属性，以便视频现在是点子，图像在主视图中。问题是视频必须通过过渡继续顺利播放。目前，每次交换发生时都会重新安装，丢失视频并导致烦人的重载和其他不需要的副作用。这有可能实现吗？

这是一个想法的粗略形象。灰色框表示视频播放器，粉色表示图像。单击较小的框（无论颜色）将来回交换两个。应该允许随时进行交换，如果在交换期间正在播放视频，则不应以任何方式中断播放。

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，并且元素的排序是实现分层的唯一方法......

更改本机视频组件的父级而不卸载

1 个答案: