react-native – 在不卸载的情况下更改react本机视频组件的父级

发布时间：2020-12-15 20:48:19 所属栏目：百科来源：网络整理

导读：我正在尝试使用 react-native-video组件在iPhone上创建画中画功能.我有两个元素,一个是视频播放器,另一个是绝对位于右下角播放器顶部的图像. View style={{ position: 'relative' }} View { this.props.swapPip ? renderVideoPlayer() : renderPip() } /View

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

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

我猜这是一个愚蠢的问题,因为zIndex实际上是反应原生的东西.它在 docs和所有东西,并且完全像你期望的那样工作：

const pipPosition = { position: 'absolute',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中工作,并且元素的排序是实现分层的唯一方法…

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!