解決React Native在Andorid和iOS下某些樣式不生效的問題

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平臺下使用原生的陰影。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,287評論 25 708
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,572評論 6 30
  • 昨天,一大早一門,趕到黃浦區第二牙防所,也就是原來的盧灣區牙防所,洗牙。到的時候大概八點半,被告知上午的號已經領完...
    指數投資之路閱讀 3,203評論 0 1