[英]LinearGradient above ImageBackground in react-native expo
在我的 react-native expo 应用程序中,我有一个背景图像在所有屏幕上都占据全高和全宽,我想在背景图像上方放置一个线性渐变,但它不起作用,图像总是出现在渐变上方,这里是编码:
import React, { Component } from 'react';
import { LinearGradeint } from 'expo';
import { Text, StyleSheet, ImageBackground } from 'react-native';
class App extends Component {
render() {
return(
<View style={styles.container}>
<LinearGradient
colors={['#4c669f', '#3b5998', '#192f6a']}>
<ImageBackground source={require('./images/background.jpg')} style={styles.backgroundImage}>
<View style={{width: "100%"}}>
<Text>
HI
</Text>
</View>
</ImageBackground>
</LinearGradient>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
backgroundImage: {
height: '100%',
width: '100%',
flex: 1,
},
export default App;
尝试将 LinearGradient 组件放在 ImageBackground 中。
<ImageBackground source={require('./images/background.jpg')} style={styles.backgroundImage}>
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} />
<View style={{width: "100%"}}>
</View>
</ImageBackground>
在 LinearGradient 上添加绝对位置:
<LinearGradient
colors={['#4c669f', '#3b5998', '#192f6a']}
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
height: '100%'
}}
/>
这对我有用:
<ImageBackground
source={require('../../assets/img/background.png')}
resizeMode="cover"
style={{
height: '100%',
width: '100%',
flex: 1,
}}>
<LinearGradient
colors={[
'rgba(255,180,113,0.75)',
'rgba(255,107,11,0.75)',
'rgba(255,180,113,0.75)',
]}
style={{flex: 1, justifyContent: 'center'}}>
{** CODE **}
</LinearGradient>
</ImageBackground>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.