在原生反应中，如何将视频组件设置为页面的背景？

Question

render() { 
    return (

     <View style={styles.container}> 


     <Video 
      source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }} 
      rate={1.0} 
      volume={1.0} 
      muted={false} 
      resizeMode="cover" 
      repeat 
      style={{ width: 300, height: 300 }} 
     /> 


     </View> 
    ); 
    } 
} 

我只是想让视频成为屏幕的背景。我正在使用一个窗口，所以我在没有Xcode的情况下如何做到了这一点。有其他方法吗？

Answer 1

如果您使用的是react-native-video库，则可以使用position: 'absolute'来设置Video组件。看到这个例子：

import React, { Component } from 'react'; 

import { AppRegistry, StyleSheet, Text, View } from 'react-native'; 
import Video from 'react-native-video'; 

export default class App extends Component { 
    render() { 
    return (
     <View style={styles.container}> 

     <Video 
      source={require('./video.mp4')} 
      rate={1.0} 
      volume={1.0} 
      muted={false} 
      resizeMode={"cover"} 
      repeat 
      style={styles.video} 
     /> 

     <View style={styles.content}> 
      <Text style={styles.text}>Hello</Text> 
     </View> 

     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    }, 
    video: { 
    position: 'absolute', 
    top: 0, 
    left: 0, 
    bottom: 0, 
    right: 0, 
    }, 
    content: { 
    flex: 1, 
    justifyContent: 'center', 
    }, 
    text: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
}); 

AppRegistry.registerComponent('App',() => App); 

我测试了它，并且效果很好：

Screenshot