在原生反应中,如何将视频组件设置为页面的背景?
问题描述:
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的情况下如何做到了这一点。有其他方法吗?在原生反应中,如何将视频组件设置为页面的背景?
答
如果您使用的是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);
我测试了它,并且效果很好:
不胜感激! –
@rcanovas我对如何设置库有点遗憾。我做了npm安装,并且做了react-native链接。但是,它不起作用。我错过了什么吗? –
你是否按照图书馆的安装步骤?您需要转到您的项目目录并运行: 'npm i -S react-native-video' 和 'react-native link'。 然后进入你的视图添加顶部'从'react-native-video'导入视频;'就像在我的文章和视频的代码中一样 – rcanovas