如何去除React Native Elements按钮圆角处的白色背景？

针对你遇到的按钮圆角边缘出现白色背景的问题，可通过以下几种方式修复：

1. 统一按钮内外层背景色配置 #

你的当前配置中仅给containerStyle设置了背景色，但Button组件内部的按钮元素可能存在默认白色背景层。修改buttonStyle，将背景色设为透明或与容器背景一致：

Button: (props, theme) => ({
  loading: false,
  raised: false, // 先关闭raised属性，它可能会自动添加带白色底色的阴影层
  color: theme.colors.primary,
  buttonStyle: { 
    borderRadius: 20, 
    elevation: 0, 
    overflow: 'hidden',
    backgroundColor: 'transparent', // 设为透明，或直接复用容器背景色theme.colors.tertiary
  },  
  containerStyle:{     
    backgroundColor: theme.colors.tertiary,
    overflow: 'hidden',
    marginHorizontal: 20,
    marginVertical: 10,
  },
  titleStyle: {
      color: theme.colors.primary, // 注意：你之前将文字颜色设为和容器背景同色，会导致文字不可见，建议改为对比色
  }
}),

2. 保留raised效果时的适配方案 #

如果必须保留raised属性，需要调整容器和按钮的层级背景：

Button: (props, theme) => ({
  loading: false,
  raised: true,
  color: theme.colors.primary,
  buttonStyle: { 
    borderRadius: 20, 
    elevation: 0, 
    overflow: 'hidden',
    backgroundColor: theme.colors.tertiary, // 让按钮本身背景和主题色统一
  },  
  containerStyle:{     
    backgroundColor: 'transparent', // 容器设为透明，避免多层背景冲突
    overflow: 'hidden',
    marginHorizontal: 20,
    marginVertical: 10,
  },
  titleStyle: {
      color: theme.colors.primary,
  }
}),

3. iOS端额外优化 #

如果iOS设备上仍有白色边缘残留，可给buttonStyle添加borderWidth: 0，移除组件默认的隐形边框：

buttonStyle: { 
  borderRadius: 20, 
  elevation: 0, 
  overflow: 'hidden',
  backgroundColor: 'transparent',
  borderWidth: 0, // 消除默认边框带来的视觉异常
},

注意点 #

• 务必保证overflow: 'hidden'同时在buttonStyle和containerStyle中配置，确保圆角的裁剪效果能作用到所有层级。
• 文字颜色需和背景色形成对比，否则会出现按钮文字不可见的问题。

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