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

欢迎各位看官的批评和指正，共同学习和成长

希望该文章对您有帮助，也希望得到您的鼓励和支持