實際需求

如果你的程式碼如下

<View style={[{width: 78, height: 78}]}> {/** 容器寬度 */}
  <Image style={[{position: 'absolute', bottom: 0, left: 0, width: 78, height: 78}]}
         source={{uri: item.uri}}/>
  <TouchableWithoutFeedback onPress={{}}>
    <View style={[{position: 'absolute', top: -15, right: -15}]}>  {/** 定位 */}
      <Image source={require('../../../images/feedBack/feedback_img_deleteimg_pre.png')}/>
    </View>
  </TouchableWithoutFeedback>
</View>
 

將 icon 樣式定位為 top:-15, right: -15, iOS 和 android 顯示效果分別為

很明顯 android 手機上的小圖示被遮蓋了一部分

在這裡不得不吐槽一下 國內 android 手機廠商，從未給我們這些攻城獅們省點事兒，但是抱怨歸抱怨，問題還是要解決的

思路如下，增加 外層容器的寬度，以 icon 的上邊界和右邊界為標準，定位 icon 就變成了簡單的 top：0， right: 0
參考程式碼如下：

<View style={[{width: 87.75, height: 93,}]}> {/** 容器寬高的修改 */}
  <Image style={[{position: 'absolute', bottom: 0, left: 0, width: 78, height: 78}]}
         source={{uri: item.uri}}/>
  <TouchableWithoutFeedback onPress={{}} >
    <View style={[{position: 'absolute', top: 0, right: 0}]}>  {/** 定位 */}
      <Image source={require('../../../images/feedBack/feedback_img_deleteimg_pre.png')}/>
    </View>
  </TouchableWithoutFeedback>
</View>
 

順便說一線 android 手機 圖片在全圓角 的時候回有 鋸齒 問題，
優化思路，在上面定義一張 四周白色 ， 中間透明的 遮罩圖
eg: 使用者頭像圖片  width: 100, height: 100, borderRadius: 50
      遮罩圖片圓形圖片： 半徑51, 中間透明半徑為 49，就會通過 2 個畫素的白色遮蓋住 圖片的據此

更多的乾貨請點選這裡 https://blog.csdn.net/woleigequshawanyier

react-native 實戰專案學習 https://github.com/15826954460/BXStage

歡迎各位看官的批評和指正，共同學習和成長

希望該文章對您有幫助，也希望得到您的鼓勵和支援