React Native borderRadius一角不圆

Question

您好，这是我使用的代码：

  menuItemButtonContainer: {
    marginRight: 1,
    marginLeft: 1,
    marginTop: 1,
    marginBottom: 1,
    paddingRight: 1,
    paddingLeft: 1,
    paddingTop: 1,
    paddingBottom: 1,
    borderRadius: 10,
    overflow: 'hidden',
    position: "absolute",
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: colors.navy
  },

但出于某种原因，右上角不是圆形的。我已经把我的大脑捏了一天。

这是组件代码

<Native.View
          style={[styles.menuItemButtonContainer, {width: 50, height: 30, marginLeft: 0}]}><Native.TouchableHighlight
          underlayColor={colors.darkGray}
          onPress={this.orderObjectChange.bind(this, 'ADD', item.id)}
          style={{
            justifyContent: 'center',
            alignItems: 'center'
          }}><Native.View><Components.Text
          style={{color: colors.navy}}>ADD</Components.Text></Native.View></Native.TouchableHighlight></Native.View>

Answer 1

您撰写的样式有效，请参阅以下内容。可能是边框样式被应用程序中的其他一些样式覆盖。请注意该元素。

Answer 2

由于我已经审核了您的代码，因此您可以尝试使用以下属性为所有角落提供角落半径

borderBottomLeftRadius: 10
borderBottomRightRadius: 10
borderTopLeftRadius: 10
borderTopRightRadius: 10

Answer 3

尝试每个角上的边框半径，如下所示：

 menuItemButtonContainer: {
    marginRight: 1,
    marginLeft: 1,
    marginTop: 1,
    marginBottom: 1,
    paddingRight: 1,
    paddingLeft: 1,
    paddingTop: 1,
    paddingBottom: 1,
    borderTopLeftRadius: 10, //Top Left Corner
    borderTopRightRadius: 10,// Top Right Corner
    borderBottomLeftRadius: 10,// Bottom Left Corner
    borderBottomRightRadius: 10, // Bottom Right Corner
    overflow: 'hidden',
    position: "absolute",
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: colors.navy
  },