在React Native處理Shadow

2018/04/25 posted in React Native comments

在React Native想要顯示陰影（Shadow）是一件意想不到的麻煩事，因為陰影以原生的方式產生，各平台的各Version各有不同。

以下簡單解釋如何處理跨平台的Shadow。

View Style Props

直接在任何View的style加入shadow。

// Android
elevation: 2,

// iOS
shadowColor: '#000000',
shadowOpacity: 0.4,
shadowRadius: 1,
shadowOffset: {
  height: 1,
  width: 0,
},

很多時候當我們想建立一些Card View（i.e. View有round corner），需要用到overflow=hidden，但這和Shadow會產生衝突，因為Android的Shadow是在View外面的。