video - 在两个 View 之间共享 View

Question

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

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

我想要类似于默认播放器控件的东西，它在传递 controls 属性时嵌入。

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

Answer 1

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

 - 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

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