Expo iOS应用中styled-components 6.1.0百分比圆角报错求助

问题本质 #

这是styled-components 6.x结合React Native（Expo基于React Native）的已知兼容问题——React Native原生的borderRadius属性不支持百分比单位，而styled-components 6.x版本对属性值的校验更严格，不会像旧版本那样自动兼容转换这类非标准单位，直接将百分比值传递给RN后就会触发报错。

实现百分比圆角的替代方案 #

如果需要实现类似百分比圆角的视觉效果，可以用以下两种方式处理：

• 基于组件尺寸动态计算
  利用styled-components的props结合组件的实际宽度来计算圆角值，比如：

  import styled from 'styled-components/native';
  
  export const Card = styled.View`
    border-radius: ${props => props.width * 0.12};
    background-color: rgb(246, 246, 246);
  `;
  

  使用组件时传入实际宽度：<Card width={200} />，这样就能得到相当于宽度12%的圆角效果。如果是全屏宽度的组件，也可以用Dimensions获取屏幕宽度来计算。

• 动态监听组件尺寸适配
  要是组件尺寸会动态变化，可借助react-native-reanimated实时计算圆角：

  // 定义styled组件
  import styled from 'styled-components/native';
  import Animated from 'react-native-reanimated';
  
  export const Card = styled(Animated.View)`
    background-color: rgb(246, 246, 246);
  `;
  

  在使用组件的地方添加尺寸监听与动态计算：

  import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
  
  const CustomCard = () => {
    const cardWidth = useSharedValue(0);
    const animatedStyles = useAnimatedStyle(() => ({
      borderRadius: cardWidth.value * 0.12
    }));
  
    return (
      <Card
        style={animatedStyles}
        onLayout={e => cardWidth.value = e.nativeEvent.layout.width}
      />
    );
  };
  

补充说明 #

styled-components 6.x对React Native的属性兼容性逻辑做了调整，不再静默处理RN不支持的CSS单位。而React Native官方文档明确标注borderRadius仅接受数值（逻辑像素），所以不要直接使用百分比单位，优先用上述基于尺寸计算的方式来模拟需求效果。

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