关于React-Native-Video这个组件，也就这么多了吧

前情提要

之前有写过对react-native-video这个组件的基础功能介绍，本次为react-native-video使用对拓展介绍，包括我在实际开发过程中遇到的一些小问题以及解决方案。

实现效果

• 竖屏状态
  
• 横屏状态
  

开始

基于对实际产品对需要，要求这个视频组建不单单对视频对播放，还有对视频进行相关控制，例如全屏显示，声音调节，进度调节，进度显示，声音，速率等等。

全屏显示

在做全屏显示的时候主要是对Android系统的适配多一些，主要是因为Android系统不支持组件自带的fullscreen属性，f**k～相信对这个组件有所了解的同学都会知道这个问题，我之前在实现的时候也查阅了相关的资料，基本上是两种实现形式：

1. 通过路由跳转实现进入全屏页播放
   也就是用两个不同的视频组件，一个小的，用于当前显示，一个大的用于视频全屏显示，这个方式主要的问题在于交互不友好，屏幕方向转换和路由跳转共同进行导致整个行为在展示上不太能让人接受。
2. 通过样式属性修改布局进行全屏展示
   我感觉这个方式也就是写在demo里比较好实现，稍微复杂一点的嵌套结构你就没法通过设置样式达到覆盖全屏的效果。

以上两种是我在网上看到的，然而一个有已知的问题了，一个还能满足我的需求，只能另辟蹊径，全屏覆盖我首先想到的就是拟态框，正好，RN本身和RN-antd都有这个组件，而我的实现方式就是通过Modal组件创建全屏浮层来实现视屏全屏显示。

实现过程

1. 组件结构
   首先先构建一个如下结构的视频UI

<TouchableOpacity
   style={
   [
     styles.content,
     //这里之所以这么写是为了适配全屏模式，全屏模式也是用这个组件
     isModal && {
   width: '100%', height: '100%'} 
   ]}
   // 额，，这个是我用来动态获取父级元素尺寸来设置视频组件尺寸用的。。。
   onLayout={
   this.layoutHandle}
   onPress={
   this.changeShowCtrl}
 >
	 <Video
	   ref={
   video => this.video = video}
	   source={
   {
   uri}}
	   poster={
   poster}
	   paused={
   paused}
	   repeat={
   true}
	   onLoad={
   this.loadHandle}
	   onProgress={
   this.progressHandle}
	   resizeMode="cover"
	   posterResizeMode="cover"
	   style={
   styles.video}
	 />
     {
   
       showCtrl
       && <View style={
   styles.ctrl_area}