react-native - 视图周围的边框在视图颜色的边缘周围留下一些区域以反应原生

Question

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

https://rnplay.org/apps/eNIbjw

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

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

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

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

谢谢！

Answer 1

下面的代码应该给你相同的结果，但它不使用'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>