在做视频Video组建的时候，无意中发现了一个播放器组件，感觉还挺不错的，推荐过来，
不能任意位置拖动进度条，只能在进度条那里拖动，声音只能静音（不能手动调节）
首先放上此项目地址：GitHub 直通车
用法：上面也有，不想去看的我会把那边的都搬过来，顺便翻译一下（英语不好，大概意思翻译一下）
npm i -S react-native-af-video-player（第一步，我电脑死活是不行，只能yarn add react-native-af-video-player）
然后是link组件，如果没有安装过video组件好像会自动安装（没有测试过，自行测试）
react-native link react-native-video
react-native link react-native-keep-awake
react-native link react-native-vector-icons
react-native link react-native-orientation
react-native link react-native-linear-gradient
一定要全部link，如果报错就重新编译。一般就会解决，基本上会是最后一个报错（BVLinearGradient" doesnotexist）
用法特别简单，就一个自封闭标签
<Videourl={url} />
{message type="info"}属性我会在下面详细描述{/message}
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| url | string, number | Yes | . | A URL string (or number for local) is required.（本地或者网络地址） |
| autoPlay | bool | No | False | Autoplays the video as soon as it's loaded（加载完成后自动播放） |
| loop | bool | No | False | Allows the video to continuously loop（循环播放） |
| title | string, No | '' | . | Adds a title of your video at the top of the player（顶部视频标题） |
| placeholder | string, No | undefined | . | Adds an image placeholder while it's loading and stopped at the beginning（加载时一个图像占位符，可以添加loading图） |
| logo | string, | No | undefined | Adds an image logo at the top left corner of the video（左上角添加一个小logo图） |
| theme | string, | No | 'white' | Adds an optional theme colour to the players controls（播放器主题，改变控件颜色） |
| style | number, object | No | {} | Apply styles directly to the Video player (ignored in fullscreen mode)（样式，全屏下失效） |
| resizeMode | string, | No | 'contain' | Fills the whole screen at aspect ratio. contain, cover etc（视频填充效果） |
| rotateToFullScreen | bool | No | False | Tapping the fullscreen button will rotate the screen. Also rotating the screen will automatically switch to fullscreen mode（旋转屏幕会自动全屏） |
| fullScreenOnly | bool | No | False | This will play only in fullscreen mode（全屏下播放） |
| inlineOnly | bool | No | False | This hides the fullscreen button and only plays the video in inline mode（会隐藏全屏按钮，默认false） |
| playInBackground | bool | No | False | Audio continues to play when app enters background.(后台下会一直播放) |
| playWhenInactive | bool | No | False | [iOS] Video continues to play when control or notification center are shown.（ios下拉状态栏会继续播放，默认关闭） |
| rate | number | No | 1 | Adjusts the speed of the video. 0 = stopped, 1.0 = normal（视频播放速度） |
| volume | number | No | 1 | Audio continues to play when app enters background.(后台下会一直播放) |
| onMorePress | function | No | undefined | Adds an action button at the top right of the player. Use this callback function for your own use. e.g share link（右上角可以添加一个功能，比如做分享之类的操作） |
| onFullScreen | bool | No | . | Returns the fullscreen status whenever it toggles. Useful for situations like react navigation.（这个没太理解，抱歉） |
| scrollBounce | bool | No | false | Enables the bounce effect for the ScrollView（没发现什么作用） |
| onTimedMetadata | function | No | undefined | Callback when the stream receives metadata（貌似是做直播流） |
| lockPortraitOnFsExit | bool | No | Keep Portrait mode locked after Exiting from Fullscreen mode（没发现什么作用） | |
| lockRatio | number | No | undefined | Force a specific ratio to the Video player. e.g. lockRatio={16 / 9}（强制视频按照这个比例） |
| onLoad | function | No | (data) => {} | Returns data once video is loaded（加载视频后返回数据） |
| onProgress | function | No | (progress) => {} | Returns progress data（进度函数） |
| onEnd | function | No | () => {} | Invoked when video finishes playing（播放完成时调用） |
| onError | function | No | (error) => {} | Returns an error message argument（返回错误消息参数） |
| Error | boolean, object | No | true | Pass in an object to Alert. See |
翻译的一般，还加了百度翻译，我想应该都能看明白
如果要看再详细的请移步该项目自行查看，昨晚在iphone真机上好像会有点卡顿出现，安卓暂未发现，
ios端因为默认是沉浸式展示，所以还未研究怎么隐藏状态栏~，在研究吧之后
项目进度目前就可以了，基本完成了。接下来就是内容的填充了。还有页面完善，敬请期待！
评论 (0)