react-native-video的簡單使用

安裝與依賴請參考github地址
https://github.com/react-native-community/react-native-video
//---------

 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Platform,
    ActivityIndicator,
    TouchableOpacity,
    ScrollView,
    Image,
    ListView,
} from 'react-native';

import Video from 'react-native-video';
import Dimensions from 'Dimensions';
import Icon from 'react-native-vector-icons/Ionicons';

import config from '../common/config';
import request from '../common/request';

const {width,height} = Dimensions.get('window');


export default class Detail extends Component {
    constructor(props){
        super(props);
        this.state={
            rowData:this.props.rowData,
            rate: 10,//播放速率
            volume: 1,
            muted: true,//静音
            resizeMode: 'contain',
            paused: false,//暂停
            videoError:false,//错误

            duration: 0.0,
            currentTime: 0.0,
            videoLoaded:false,
            playing:false,
            playEnd:false,

            dataSource:new ListView.DataSource({
                rowHasChanged:(r1,r2) => r1 !== r2,
            })
        }

        // this._onLoadStart = this._onLoadStart.bind(this);
        // this._onLoad = this._onLoad.bind(this);
        this._onProgress = this._onProgress.bind(this);
        // this._onEnd = this._onEnd.bind(this);
        // this._onError = this._onError.bind(this);

        this._rePlay = this._rePlay.bind(this);
        this._resume = this._resume.bind(this);
        this._pause = this._pause.bind(this);
        this._pop = this._pop.bind(this);
        this._renderRow = this._renderRow.bind(this);
    }

    _renderRow(rowData_reply){
        return(
            
                
                
                    {rowData_reply.replyBy.nickname}
                    {rowData_reply.content}
                
            
        )
    }

    componentDidMount(){
        this._fetchData();//从服务器获取数据
    }
    _fetchData(){

        let url = config.api.base + config.api.comments;

        //发送网络请求
        request.get(url,{
            id:"112233",
            accessToken:'jjjj'
        }).then(
            (data)=>{
                if(data && data.success){
                    let comments = data.data;
                    if(comments && comments.length > 0){
                        this.setState({
                            dataSource:this.state.dataSource.cloneWithRows(comments)
                        })
                    }
                }
            }
        ).catch(
            (error)=>{
                console.log('数据有问题');
            }
        )
    }

    _pop(){
        let {navigator} = this.props;
        if(navigator){
            navigator.pop();
        }
    }
    _resume(){
        if(this.state.paused){
            this.setState({
                paused:false
            });
        }
    }
    _pause(){
        if(!this.state.paused){
            this.setState({
                paused:true
            });
        }
    }

    _rePlay(){
        this.setState({
            playEnd:false,
            paused: false,
        })
        this.refs.videoPlayer.seek(0);
    }

    _onLoadStart=()=>{
        console.log('_onLoadStart');
    }
    _onLoad=(data)=>{
        console.log('_onLoad--视频总长度'+data.duration);
        this.setState({duration:data.duration});
    }
    _onProgress(data){
        if(!this.state.videoLoaded){
            this.setState({
                videoLoaded:true,
            });
        }
        if(!this.state.playing && !this.state.playEnd){
            console.log('进来改变状态');
            this.setState({
                playEnd:false,
                playing:true,
            });
        }

        this.setState({currentTime:data.currentTime});
        //console.log('_onProgress---当前时间'+data.currentTime);
    }

    _onEnd=()=>{
        this.setState({
            playing:false,
            paused:true,
            playEnd:true,
        })
        console.log('结束了');
    }
    _onError=(error)=>{
        console.log('错误'+JSON.stringify(error))
        this.setState({
            videoError:true,
        })
    }

    getCurrentTimePercentage() {
        if (this.state.currentTime > 0) {
            return parseFloat(this.state.currentTime) / parseFloat(this.state.duration);
        } else {
            return 0;
        }
    }


    render() {
        let rowData = this.state.rowData;
        //一个是当前时间,一个是剩余时间
        const flexCompleted = this.getCurrentTimePercentage() * 100;
        const flexRemaining = (1 - this.getCurrentTimePercentage()) * 100;

        return (
            
                {/*导航栏*/}
                
                    {/*返回按钮*/}
                    
                        
                        返回

                    
                    {/*中间的文字*/}
                    视频详情页面
                


                {/*播放器*/}
                
                    

效果圖如下:

图片.png