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

时间:2016-09-10 14:00:32

标签: video reactjs react-native fullscreen

我有一个类似于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

1 个答案:

答案 0 :(得分:0)

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

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

相关问题