圆角边框问题

[devYoungyang]

是否为新品（必填） 新品

用户ID（必填） 1434926611

企业名称（必填） 飞彗

环境（必填）

• 电脑操作系统:[eg.Windows/Mac OS/Linux]
• 手机系统:[eg.Android 8.1/iOS 11.0]
• SDK分支: [eg.master/10000/...]
• 相关模块:[eg.Host/Service/Account]

现象（必填） <View style={{ height: 400, alignItems: "center", justifyContent: 'center' }}> <View style={{ width: 200, height: 200, borderColor: 'cyan', backgroundColor: 'red', borderRadius: 10, borderWidth: 2.5 }} /> </View> 如上给一个组件设置圆角边框，在圆角周围会有一条黑色的线

期望（必填） 给出原因，解决上述问题，

不要贴大段代码❗️

[MIoTBot]

@devYoungyang 感谢您提出宝贵的 issue，我会通知开发尽快处理！

[zanetti4]

您说的是这个问题吗？ #1390

[devYoungyang]

不是，你把我的代码放在一个demo执行一下，仔细看圆角周围会有细线

[zanetti4]

我在安卓手机测试，没看出来有黑色的线……你能贴个截图吗？这个问题在安卓、ios 都有吗？

[devYoungyang]

安卓没有，iOS设备才有

[devYoungyang]

情景再现了没有？

[zanetti4]

复现了，正在查找原因

[ningRegister]

@devYoungyang 显示器的颜色是某几个颜色合成的，正好这两个颜色发生了物理反应，您可以在用其他颜色试一下，应该没有问题

[devYoungyang]

其他颜色是没有问题，原因能说清楚一点吗？

[devYoungyang]

@zanetti4 这个问题给出这个解释，就算解决了？

[zanetti4]

我们查到更详细的解释，再告诉您。

[devYoungyang]

大半个月过去了，没有回音吗

[chengww5217]

似乎这个问题是 RN 自己在 IOS 上面的问题。

我在 https://reactnative.dev/docs/getting-started 上面用示例代码一样复现了这个问题。

这边有一个临时的解决办法是在外层套上一层 View，在外层进行 border 的设定以避免此问题：

<View style={{
  borderColor: 'cyan',
  borderRadius: 10,
  borderWidth: 4,
  overflow: 'hidden',
  marginTop: 16,
  }}>
      <View style={{
          width: 200,
          height: 200,
          backgroundColor: 'red',
      }}/>
</View>

** PS：如果有大量的此布局可能会导致性能问题。 **

附上运行在 https://reactnative.dev/docs/getting-started 的示例代码：

            <View style={{
                alignItems: "center",
                justifyContent: 'center',
                backgroundColor: 'white',
                flex: 1,
            }}>
                <View style={{
                    width: 200,
                    height: 200,
                    borderColor: 'cyan',
                    backgroundColor: 'red',
                    borderRadius: 10,
                    borderWidth: 4,
                }}/>

                <View style={{
                    borderColor: 'cyan',
                    borderRadius: 10,
                    borderWidth: 4,
                    overflow: 'hidden',
                    marginTop: 16,
                }}>
                    <View style={{
                        width: 200,
                        height: 200,
                        backgroundColor: 'red',
                    }}/>
                </View>

            </View>

在原生 Expo Go IOS 客户端运行的截图：