react native video player (一)

使用react-native-video库做一个react native的视频播放器。

首先是接入react-native-video库

npm i -S react-native-video
react-native link

然后在一个组件中将它跑起来

import React from 'react';
import {View} from 'react-native';
import styles from '../sytles/demostyle';
import Video from 'react-native-video';

export default class PlayerScreen extends React.Component {

    video;

    render() {
        return (
            <View style={styles.container}>
                <Video
                    ref={(ref) => {
                    this.video = ref
                }}
                    //来自本地的MP4视频
                    source={require('../../assets/dcw.mp4')}
                    //1.0表示默认速率
                    rate={1.0}
                    //图片等比例缩放
                    resizeMode='contain'
                    //不重复播放
                    repeat={false}
                    //默认音量
                    volume={1.0}
                    //样式
                    style={styles.backgroundVideo}/>
            </View>
        );
    }
}

效果如下

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,641评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 简短说明 收录一些好用的RN第三方组件,以方便日常的使用,大家有什么推荐的也可以跟我说,我加进去。如有冒犯,可以联...
    以德扶人阅读 43,727评论 44 214
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 24,133评论 8 183
  • 现在二十岁还没过过半,可是觉得自己的青春快没了,不知道哪里出错了,今年,面对大老远从成都跑过来需要我答案...
    落花2阅读 233评论 0 0