我正在使用react-native-cli，但是在我的应用程序中，react-native-video无法在我的页面上工作。它只显示了空白的位置。我已经运行了react-native link命令以链接库，并在运行react-native run-android命令后，但是页面仍然显示空白而没有任何错误。我正在使用React Native版本0.48.4。感谢您的帮助！！
import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView,Image, Dimensions,Alert } from 'react-native';
import Video from 'react-native-video';
export default class HomeScreen extends Component {
constructor(props) {
super(props);
this.loadStart = this.loadStart.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.onBuffer = this.onBuffer.bind(this);
this.onTimedMetadata = this.onTimedMetadata.bind(this);
};
loadStart(){
console.log('loadStart');
}
onLoad(){
console.log('onLoad');
}
onProgress(){
console.log('onProgress');
}
onEnd(){
console.log('onEnd');
}
onError(){
console.log('onError');
}
onBuffer(){
console.log('onBuffer');
}
onTimedMetadata(){
console.log('onTimedMetadata');
}
render() {
return (
<View style={styles.container}>
<Image style={styles.logo} source={require('../../images/logo.png')} />
<View style={styles.Body}>
<ScrollView>
<View style={styles.scrollerInner}>
<Video source={require('../../images/tndc-video.mp4')} // Can be a URL {uri:'https://www.w3schools.com/html/mov_bbb.mp4'} or a local file require('').
ref={(ref) => {this.player = ref}}
muted={false} // Mutes the audio entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio.*
repeat={false} // Repeat forever.
playInBackground={false} // Audio continues to play when app entering background.
playWhenInactive={false} // [iOS] Video continues to play when control or notification center are shown.
ignoreSilentSwitch={"ignore"} // [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.
progressUpdateInterval={250.0} // [iOS] Interval to fire onProgress (default to ~250ms)
onLoadStart={this.loadStart} // Callback when video starts to load
onLoad={this.setDuration} // Callback when video loads
onProgress={this.setTime} // Callback every ~250ms with currentTime
onEnd={this.onEnd} // Callback when playback finishes
onError={this.videoError} // Callback when video cannot be loaded
onBuffer={this.onBuffer} // Callback when remote video is buffering
onTimedMetadata={this.onTimedMetadata} // Callback when the stream receive some metadata
style={styles.videoPlayer}
/>
</View>
</ScrollView>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
paddingTop:30,
width:'100%',
},
logo:{
width:260,
height:66,
marginBottom:20,
marginLeft:20,
},
Body:{
width:'100%',
flexGrow:1,
height:30
},
scrollerInner:{
paddingHorizontal:20,
},
title:{
fontSize:30,
color:'#000',
fontWeight:'bold',
marginBottom:12,
},
description:{
fontSize:16,
color:'#000',
marginBottom:20,
},
videoPlayer:{
width:Dimensions.get('window').width,
backgroundColor:'#000',
height:300,
},
});
styles.videoPlayer的position: 'absolute'属性添加进去。 - bennygenel