react-native-video的簡單使用 react-native-video的簡單使用

【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 = https://www.it610.com/article/this.state.rowData; //一个是当前时间,一个是剩余时间 const flexCompleted = this.getCurrentTimePercentage() * 100; const flexRemaining = (1 - this.getCurrentTimePercentage()) * 100; return ( {/*导航栏*/} {/*返回按钮*/} 返回 {/*中间的文字*/} 视频详情页面 {/*播放器*/}