在两个视图之间共享视图react-native

Question

我有一个类似于facebook feed的应用程序,其中包含视频.我正在使用react-native-video来渲染视频.现在为了使视频全屏,我已将组件包装到另一个组件中.另一个组件有一个TouchableHightlight.在TouchableHighlight的onPress事件中,创建了一个新路由,并将this.props.children作为props传递给路径中的组件.新组件只是一个呈现{this.props.children}的组件.但这会导致包装的视频组件卸载并在新视图中重建(即它再次调用组件的构造函数).这会导致视频加载并从初始位置开始,而不是使用相同的组件并存储缓冲的数据并从其离开的位置继续.

链接到演示项目:https://github.com/shahankit/video-player-fullscreen

我想要一些类似于默认播放器控件的东西,它们在传递控件道具时嵌入.

这种使组件全屏的方法取自react-native-lightbox

Answer 1

创建类似于以下的视图层次结构。

 - Root View(position: absolute)
   - Your old entire screen layout which small video view is inside of it.
   - Your fullscreen video view with opacity = 0 with more zIndex

然后在小视频视图上使用 onPress 来切换全屏视频视图的不透明度