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来切换全屏视频视图的不透明度

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

1 个答案: