How to react natively, how do you set the video component to the background of the page?
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>
);
}
}
I just want to make the video screen background. I am using windows, so I am a bit lost on how to do this without Xcode. Is there an alternative way?
+6
source to share
2 answers
If you are using the Responsive Video Library , you can install the component Video
with position: 'absolute'
. See this example:
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);
I have tested this and it works well:
+7
source to share
Here's a great video tutorial I found to help with that.
https://codedaily.io/screencasts/32/Create-a-Looping-Background-Video-with-React-Native-Video
0
source to share