1

在为问题创建标题方面,我可能做得不够好。下面是rnplay上演示的错误

https://rnplay.org/apps/eNIbjw

问题是我想在用户的头像上显示一些彩色图块来代表他们的状态。所以,我有一个头像图像,我在上面放置了一个View背景颜色设置为用户状态颜色(示例代码中为绿色)的头像,并且我有一个白色边框,View以便看起来更好。如果你仔细观察,可能会按几次(Cmd ++)来缩放屏幕,iOS 的边框周围有一条很细的绿线。下面是它在 iOS 上的外观截图。

在此处输入图像描述

此问题在 Android 上不存在,并且边框周围没有细绿线,看起来非常好。

我尝试了几种不同的样式来解决这个问题,但由于我有限的 CSS 知识,我无法这样做。

如果您有解决方法,请分享。

谢谢!

4

1 回答 1

0

下面的代码应该给你相同的结果,但它不使用'border'属性。它使用两个圆圈,一个比另一个大。较大的(父)是白色的,而内部(子)是绿色的。由于您的 justifyContent 和 alignItems 都设置为“中心”,因此内圈周围总是会有 2px 的白色。这是代码:

<View style={styles.container}>
     <View style={{width: 30, height: 30, marginHorizontal: 2}}>
      <Image
        source={{uri: 'https://cdn1.iconfinder.com/data/icons/avatar-2-2/512/Salesman_2-512.png'}}
            style={{height: 30, width: 30}} />
      <View style={{backgroundColor: 'white', position: 'absolute', height: 16, width: 16, top: -6, right: -6, 
        borderRadius: 8, justifyContent: 'center', alignItems: 'center'}}>
        <View style={{width: 26, height: 26,
            backgroundColor: 'green'}} />
      </View>
    </View>
  </View>
于 2017-02-25T22:13:22.913 回答