リアクションネイティブの背景画像のオーバーレイオーバーレイ

Question

私は自分のページの背景として画像を使用しています。私は画像上に不透明度を持つbackgroundColorを追加したいと思います。私はReact Nativeでこれをどのように達成できるかはわかりません。ここで

render() { 
    return (
    <Image source={require('./assets/climbing_mountain.jpeg')} style={styles.container}> 
     <Text>Hello</Text> 
    </Image> 
) 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    width: null, 
    height: null, 
} 

は、私は、Webページ上でこれを実現したい方法です：あなたが行うことができますHow to make in CSS an overlay over an image?

Answer 1

クールなことは、それ以上の絶対位置ビューを削除です。

<View> 
    <Image source={require('./assets/climbing_mountain.jpeg')} style= {StyleSheet.absoluteFillObject}} resizeMode='cover'> 
    <Text>Hello</Text> 
    </Image> 
    <View style={styles.overlay} /> 
</View> 

... 
const styles = StyleSheet.create({ 
    overlay: { 
    ...StyleSheet.absoluteFillObject 
    backgroundColor: 'rgba(0,0,0,0.5)' 
    } 
}) 

absoluteFillObjectあなたのオーバーレイを通じてタップすることができるようにしたい場合は、単にnone

ドキュメントを視野にpointerEvents小道具を設定

{ 
position: 'absolute', 
top: 0, 
left: 0, 
right: 0, 
bottom: 0 
} 

と同じです：​​

Answer 2

@Kevin Velascoさんに感謝します。

render() { 
    return (
    <View style={styles.container}> 
     <Image source={require('./assets/climbing_mountain.jpeg')} style={styles.imageContainer}> 
     </Image> 
     <View style={styles.overlay} /> 
    </View> 
) 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    width: null, 
    height: null, 
    }, 
    imageContainer: { 
    flex: 1, 
    width: null, 
    height: null, 
    }, 
    overlay: { 
    ...StyleSheet.absoluteFillObject, 
    backgroundColor: 'rgba(69,85,117,0.7)', 
    } 
})