视图周围的边框在视图颜色的边缘周围留下一些区域以反应本机答案

【问题标题】：Border around a view leaves some area around the edges in the view color in react native视图周围的边框在视图颜色的边缘周围留下一些区域以反应本机
【发布时间】：2016-12-05 12:30:47
【问题描述】：

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

https://rnplay.org/apps/eNIbjw

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

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

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

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

谢谢！

【问题讨论】：

我看到过类似的边框和视图问题。有时你会得到一些意想不到的结果。我认为最好在他们的 github 存储库中将其作为问题报告。

标签： react-native react-native-flexbox

【解决方案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>

【讨论】：