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

我有一个类似于facebook feed的应用程序，其中带有视频。我正在使用react-native-video来呈现视频。现在要将视频全屏显示，我已将该组件包装到另一个组件中。这另一个组件有一个TouchableHightlight。在TouchableHighlight的onPress事件中，会创建一条新路线，并将this.props.children作为道具传递给路线中的组件。新组件只是呈现{this.props.children}的一个组件。但是，这会导致包装的Video组件卸载并在新视图中重新构建（即它再次调用组件的构造函数）。这会导致视频加载并从初始位置开始，而不是使用相同的组件，并存储缓冲的数据并从其离开的位置恢复。在两个视图之间共享视图react-native

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

我想类似违约时控制托传递其自带嵌入式播放器控制的东西。

使得组件的方法，这种去全屏从react-native-lightbox

来源

2016-09-10 meteors

你必须使用的路线做出改变的不透明度，可使用状态来控制，如果视频全屏或不？ –

好吧我可以使用状态，但在实际的应用程序中，我将视频包裹在非常复杂的视图层次结构中。为了制作全屏，我必须使视图环绕视频组件覆盖所有组件并覆盖整个屏幕。 – meteors

您可以使用CSS将视图更改为全屏。 {position：'absolute'，top：0，left：0，right：0，bottom：0}。 Z-index可能是一个问题，因为它在react-native中不被支持。如果是这样，您可能只需考虑将当前播放时间作为道具传递给新组件并从那里开始播放视频 –

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

- 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小视频视图切换全屏视频视图

来源

2017-06-23 05:05:09 Nantaphop

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

回答

相关问题