[英]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.