如何匹配子视图的 borderRadius 与父视图的 borderRadius

Question

有谁知道如何解决下面的 borderRadius 问题？ borderTopLeftRadius 和 borderTopRightRadius 设置为 30，父视图中的 borderRadius 也是如此，但是有空格，并且它们不匹配。

代码如下：

 <View style={styles.card}>
        <View style={styles.cardHeader}>
          <Text style={styles.cardHeaderText}>Title</Text>
        </View>
 </View>

样式：

const styles = StyleSheet.create({
    
    card: {
        flexDirection: 'column',
        margin: 10,
        width: '95%',
        height: 500,
        backgroundColor: '#FFF',
        borderRadius: 30,
        borderWidth: 5,
      },
      cardHeader: {
        width: '100%',
        height: '12%',
        backgroundColor: 'green',
        borderBottomWidth: 5,
        justifyContent: 'center',
        alignContent: 'center',
        borderTopLeftRadius: 30,
        borderTopRightRadius: 30,
      },
     cardHeaderText: {
       fontSize: 20,
       fontWeight: 'bold',
       paddingHorizontal: 16,
  },
    
    )}

Answer 1

内视图的半径应等于外半径减去边框的宽度。所以，30-5=25.

Answer 2

您可以像 Abe 提到的那样使用 border radius = 25 或者

您可以删除 cardHeader 的边框半径并将 overflow:"hidden" 添加到卡片中

const styles = StyleSheet.create({
    
    card: {
        ...all your styles,
        overflow: "hidden"
      },
      cardHeader: {
        width: '100%',
        height: '12%',
        backgroundColor: 'green',
        borderBottomWidth: 5,
        justifyContent: 'center',
        alignContent: 'center',
        //borderTopLeftRadius: 30,
        //borderTopRightRadius: 30,
      },  
    )}

如何匹配子视图的 borderRadius 与父视图的 borderRadius

How to match the borderRadius of a child view with the parent view borderRadius

reactjs

react-native