React原生背景视频未显示

问题描述：

我已经复制并引用了所有使用视频作为我的背景的原始文件，但它仍然不显示。我没有收到任何错误。我已经参考了文档，并一直坚持2个小时。React原生背景视频未显示

这里是我的代码

import React, { Component } from "react"; 
import { AppRegistry, StyleSheet, Text, View, TextInput } from "react- 
native"; 

import Video from "react-native-video"; 
import LightVideo from "./Turntablevid.mp4"; 

    export default class BackgroundVid extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Video repeat source={LightVideo} resizeMode="cover" style= 
     {StyleSheet.absoluteFill} /> 
     <View> 
     <Text style={styles.header}>Login</Text> 
     <TextInput 
     placeholder="Email" 
     style={styles.input} 
     /> 
     <TextInput 
     placeholder="Password" 
     secureTextEntry 
     style={styles.input} 
     /> 
    </View> 
    </View> 
); 
} 
} 

const styles = StyleSheet.create({ 
container: { 
flex: 1, 
alignItems: "center", 
justifyContent: "center", 
    }, 
header: { 
fontSize: 30, 
color: "#FFF", 
backgroundColor: "transparent", 
textAlign: "center" 
    }, 
    input: { 
    width: 300, 
    height: 50, 
    backgroundColor: "#FFF", 
    marginVertical: 15, 
    paddingLeft: 15 
    } 
    });

答

用这个例子：

<Video source={require('./Turntablevid.mp4')} 
     ref={(ref) => { 
     this.player = ref 
     }}          // Store reference 
     rate={1.0}        // 0 is paused, 1 is normal. 
     volume={1.0}       // 0 is muted, 1 is normal. 
     muted={false}       // Mutes the audio entirely. 
     paused={false}       // Pauses playback entirely. 
     resizeMode="cover"      // Fill the whole screen at aspect ratio.* 
     repeat={true}       // 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.backgroundVideo} /> 

// Later to trigger fullscreen 
this.player.presentFullscreenPlayer() 

// To set video position in seconds (seek) 
this.player.seek(0) 

// Later on in your styles.. 
var styles = StyleSheet.create({ 
    backgroundVideo: { 
    position: 'absolute', 
    top: 0, 
    left: 0, 
    bottom: 0, 
    right: 0, 
    }, 
});

React原生背景视频未显示

相关推荐