React native 在react native中设置背景视频
如果这是一个新手问题,我很抱歉,但我真的对在我的react原生应用程序中设置背景视频感到失望 从react本机视频的文档开始。 它是糟糕的文档还是我真的很难理解如何设置它React native 在react native中设置背景视频,react-native,background,React Native,Background,如果这是一个新手问题,我很抱歉,但我真的对在我的react原生应用程序中设置背景视频感到失望 从react本机视频的文档开始。 它是糟糕的文档还是我真的很难理解如何设置它 我安装了npm--保存了本机视频 我运行了本地链接 我检查了其他java文件,它们已经有了他记录的内容。 他提到Windows时,我不知道他所说的是什么或哪个用户案例场景应该做什么 对守则: 在我的登录组件中,我想要一个背景视频。 这是我目前的代码: import React, { Component } from 'reac
import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import Video from 'react-native-video';
class LoginComponent extends Component {
render() {
const {
containerStyle,
introTextContainerStyle,
introTextStyle,
introTextHighlightStyle,
loginButtonsContainerStyle,
backgroundVideo
} = styles;
return (
<View style={ containerStyle }>
<Video source={{uri: "../assets/background.mp4"}}
ref={(ref) => {
this.player = ref
}}
rate={1.0}
volume={1.0}
muted={false}
resizeMode="cover"
repeat={true}
style={backgroundVideo}
/>
<View style={ introTextContainerStyle }>
<Text style={ introTextStyle }>
Tus problemas
</Text>
<Text style={ introTextHighlightStyle }>
Lisdos's
</Text>
<Text style={ introTextStyle }>
en un abrir y cerrar de ojos
</Text>
</View>
<View style={ loginButtonsContainerStyle }>
<TouchableOpacity>
<Text>Log In with Facebook</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = {
containerStyle: {
height: '100%',
padding: 20
},
introTextContainerStyle: {
borderColor: 'black',
borderWidth: 1,
justifyContent: 'center',
alignItems: 'center',
height: '50%'
},
introTextStyle: {
fontSize: 24,
textAlign: 'center',
lineHeight: 40
},
introTextHighlightStyle: {
fontSize: 24,
textAlign: 'center',
fontWeight: '700',
color:'gold'
},
loginButtonsContainerStyle: {
borderColor: 'blue',
borderWidth: 1,
height: '50%',
justifyContent: 'center',
alignItems: 'center'
},
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
}
}
export default LoginComponent;
设置或标记中是否缺少某些内容?我的uri错了吗
感谢您的帮助。问题在于您的
源代码标签。由于使用RN资产系统加载文件,因此需要直接导入文件,而不是使用uri
我通常这样做(我建议您这样做):
从“../assets/background.mp4”导入背景;
...
或者,您可以直接在源标记中导入文件:
<Video source={require('../assets/background.mp4')}
...
/>
import background from '../assets/background.mp4';
...
<Video source={background}
...
/>
<Video source={require('../assets/background.mp4')}
...
/>