在原生反應中，如何將視頻組件設置爲頁面的背景？

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