React Native应用初始加载时BorderRadius不生效问题求助

我给两个View组件设置了borderRadius: 10，但应用初始加载时视图显示为直角，该属性不生效。不过修改代码触发刷新后（比如把值改了再改回10），圆角就能正常显示。请问怎么解决这个问题，让BorderRadius在初始加载时就生效？

相关代码 #

sunSquere: {
  height: 130,
  width: 130,
  marginTop: 340,
  marginRight: 30,
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: 10,
},

<View style={[styles.sunSquere, {backgroundColor: graphColour}]}>
  <Text style={[{ color: textColour, fontSize: 18, }]}>Sunrise: {sunrise}</Text>
  <Text style={[{ color: textColour, fontSize: 18, }]}>Sunset: {sunset}</Text>
</View>

效果对比 #

• 初始加载效果：
  

• 代码刷新后效果：
  

• 添加overflow: 'hidden'
  React Native中部分场景下，背景色渲染会覆盖圆角裁剪逻辑，给View样式添加overflow: 'hidden'可强制裁剪圆角区域：

  sunSquere: {
    height: 130,
    width: 130,
    marginTop: 340,
    marginRight: 30,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 10,
    overflow: 'hidden', // 新增属性
  },
  

• 确保动态样式初始值就绪
  当前通过内联样式动态设置backgroundColor，若graphColour在初始渲染时未完成赋值，会导致样式合并异常。确保状态在组件挂载时就有初始值：

  // 示例：用useState初始化背景色
  const [graphColour, setGraphColour] = useState('#your-initial-color');
  

  若颜色固定，直接将backgroundColor写入样式表也能避免问题。

• 强制组件重绘（兜底方案）
  若前两种方法无效，可在组件挂载后触发一次状态更新，强制重绘视图：

  useEffect(() => {
    // 触发无意义的状态更新，强制重绘
    setGraphColour(prev => prev);
  }, []);
  

内容的提问来源于stack exchange，提问作者Omer Giladi