android 圖片定位問題 以及 鋸齒 問題

實際需求

如果你的代碼如下

<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

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

如果該文章對您有幫助，可以點個贊對錶示支持