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>
);
}
}
我只是想让视频成为屏幕的背景。我使用的是Windows,所以在没有Xcode的情况下如何做到这一点我有点迷失。还有另一种方法吗?
答案 0 :(得分:7)
如果您使用的是react-native-video库,则可以使用Video
设置position: 'absolute'
组件。见这个例子:
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);
我测试了它并且效果很好: