Image的border(x)Radius不生效(在iOS下出現)
borderTopRightRadius
borderTopLeftRadius
borderBottomRightRadius
borderTopLeftRadius
某些時候我們需要設置圖片在某個方向上的圓角,然而,我發現在iOS下,這四個style的屬性是不生效的,但是對于View是生效的。解決辦法是給Image加一個View,給View設置overflow: 'hidden'
。
再等等!!可能你的還是沒有生效,比如下面這位童鞋的:
2017-06-09_121304.jpg
這個時候,試著把
border(x)Radius
設置的大一點,我不知道為什么在某個數值范圍下,你是看不到圓角效果的,但是確實已經生效了,先將數值設置的大一點,確定生效,再慢慢改到你需要的值就好了。
作為背景圖的Image的borderRadius屬性不生效(在Andorid和iOS下出現)
最開始我也沒有發現這個問題,給Image設置borderRadius效果就是那么明顯啊,然而,當我把Image作為背景圖使用比如:
<Image source={require('test.png')}>
<Text>hello</Text>
</Image>
就發現這個屬性怎么也不起作用了,沒什么解決辦法,如果這張圖片的圓角效果很重要,那就不要作為背景圖了,只能將要放在圖片上的內容設置為絕對定位了,position: 'absolute'
。
View的shadow屬性(在Andorid下不生效)
這個其實人家官網也說啦,我們這個屬性確實只針對iOS平臺,Android平臺也有一個屬性可以用,但是你無法設置什么陰影顏色,陰影偏移,只能設置一個陰影數值,針對一般的情況也勉強夠用的,所以我們的樣式可以寫成:
{
elevation: 3,
shadowColor: Colors.lightgrey,
shadowOffset: {width: 1, height: 1},
shadowOpacity: 0.5,
shadowRadius: 3,
}
若想在Android下使用比較好的陰影效果就用插件吧:https://www.npmjs.com/package/react-native-shadow 這個插件也說啦:我們建議您在iOS平臺下使用原生的陰影。