、フィルタ特性がそうのような画像の明るさを設定するために使用することができますCSSでネイティブ

Question

反応し、

// using CSS 
filter: brightness(50%); 

はどのようにしてネイティブイメージを反応させるのでは同じ結果を達成することができますか？

Answer 1

リアクションネイティブのCSSサポートは限られていますが、このレポを見てください：https://github.com/stoffern/gl-react-instagramfiltersこれはあなたを助けるかもしれません。

Answer 2

私はそれを試した後にこれを理解しました。

JSX：以下の結果を達成するために

<Image style={styles.universityImage} source={require('./csun.jpg')}> 
    <View style={styles.innerFrame}> 
     <Text style={styles.universityName}>California State University, Northridge</Text> 
     <Text style={styles.universityMotto}>"CSUN Shine"</Text> 
    </View> 
</Image> 

のStyleSheet：

const styles = StyleSheet.create({ 
// View tag styling 
innerFrame: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    backgroundColor: 'rgba(0, 0, 0, .5)', 
}, 
// Image tag styling 
universityImage: { 
    width: 300, 
    height: 250, 
    borderRadius: 5, 
}, 
universityName: { 
    color: '#fff', 
    opacity: .9, 
    fontSize: 20, 
    textAlign: 'center', 
    fontWeight: '500', 
    marginVertical: 15, 
    backgroundColor: 'transparent' 
}, 
universityMotto: { 
    color: '#fff', 
    opacity: .9, 
    textAlign: 'center', 
    backgroundColor: 'transparent' 
} 
}) 

巣<View></View><Image></Image>内のタグとは、そのビュータグflex: 1を与えることは、全体の幅を占めていることこの場合、<Image></Image>タグである親タグの高さを指定します。次にbackgroundColor: rbga(0, 0, 0, .5)を<View></View>タグに追加して、その不透明な外観にします。それでおしまい！これが誰かを助けることを願っています！

P.S. <View></View>ネストされたタグの中でjustifyContent: 'center', alignItems: 'center'がテキストが完全に真っ暗になるようにしました