React Native iOS端设置borderRadius为'50%'时组件圆角不生效如何解决？

首先明确结论：React Native 0.60版本以下的iOS平台原生不支持百分比格式的borderRadius属性，仅安卓端提前做了适配，这就是双端表现不一致的根本原因。

你可以选择以下任意一种方案解决问题：

• 方案1：使用固定圆角数值
  你当前的组件宽高都是200，直接设置borderRadius: 100即可，双端都能正常显示圆形，和50%的效果完全一致。
• 方案2：动态计算圆角数值（适用于宽高不确定的组件）
  通过onLayout回调拿到组件的实际宽高，取宽/高的一半作为圆角值赋值即可，示例代码如下：

  import { TouchableOpacity, Text } from 'react-native';
  
  export default class App extends React.Component {
    state = {
      borderRadius: 0
    }
    render() {
      return (
        <TouchableOpacity
          onLayout={(e) => {
            const { width } = e.nativeEvent.layout
            this.setState({ borderRadius: width / 2 })
          }}
          style={{
            width: 200,
            height: 200,
            borderRadius: this.state.borderRadius,
            backgroundColor: 'red',
          }}>
          <Text> Click Me</Text>
        </TouchableOpacity>
      );
    }
  }
  

• 方案3：添加overflow属性（适用于RN 0.60及以上版本）
  0.60及以上版本的RN已经支持iOS端百分比borderRadius，只需要在样式中额外添加overflow: 'hidden'即可生效，修改后的样式如下：

  style={{
    width: 200,
    height: 200,
    borderRadius: '50%',
    backgroundColor: 'red',
    overflow: 'hidden'
  }}
  

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