我可能没有在创建问题的标题方面做得最好。以下是rnplay
上显示的错误https://rnplay.org/apps/eNIbjw
问题是我想在用户身上展示一些彩色瓷砖'化身来代表他们的身份。所以,我有一个头像图片,我已经将View
的背景颜色设置为用户'状态颜色(示例代码中为绿色)我在View
周围有一个白色边框,以便它看起来更好。如果您仔细观察,可能会按几次(Cmd + +)来缩放屏幕,iOS边框周围有一条非常细的绿线。下面是它在iOS上的外观截图。
这个问题在Android上并不存在,看起来非常好,边框周围没有细绿线。
我尝试了几种不同的样式来解决这个问题,但由于我的CSS知识有限,我无法这样做。
如果您有办法,请分享。
谢谢!
答案 0 :(得分:0)
以下代码应该为您提供相同的结果,但它不会使用' border'属性。它使用两个圆圈,一个比另一个圆圈大。较大的(父)一个是白色,而内(孩子)是绿色。由于你的justifyContent和alignItems都设置为' center'内圈总是会有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>