边框半径不适用于 Button答案

【问题标题】：Border radius not work with Button边框半径不适用于 Button
【发布时间】：2018-05-07 06:23:48
【问题描述】：

我想创建一个带有 touchableOpacity 的边框半径按钮。

我试过这种风格：

whiteButton : {
    borderWidth:1,
    overflow : "hidden",
    marginTop: "3%",
    backgroundColor:"white",
    width:"80%",height:"6%",
    borderRadius : 20,
    borderColor:"white",
    marginBottom:10
}

但按钮看起来像这样：

如果我删除溢出：“隐藏”，它看起来像这样：

你有什么想法吗？

编辑：

将文本的 backgroundColor 设置为透明后，我得到与溢出相同的结果：“隐藏”但文本就在下面这就像我的文本超出了可触摸的不透明度

【问题讨论】：

标签： button react-native react-native-ios touchableopacity

【解决方案1】：

好的，问题出在我的代码中。我还没有看到，但我添加了一个视图，并且 touchableopacity 被包裹在我的视图中。

之前：

<View>
      <TouchableOpacity onPress={() => {this.sendLoginData()}} style={styles.whiteButton}>
         <Text style={{textAlign:"center", fontSize:25, color:"#3b88c3", backgroundColor: 'rgba(0,0,0,0)'}}>S'IDENTIFIER</Text>
      </TouchableOpacity>
</View>

后：

<TouchableOpacity onPress={() => {this.sendLoginData()}} style={styles.whiteButton}>
     <Text style={{textAlign:"center", fontSize:25, color:"#3b88c3", backgroundColor: 'rgba(0,0,0,0)'}}>S'IDENTIFIER</Text>
</TouchableOpacity>

【讨论】：

【解决方案2】：

来自反应native material design，

按钮组件呈现一个可触摸的按钮，消耗 full 其父容器的宽度。

占用其父级的全宽，这意味着在 TouchableOpacity 上添加填充。（这是你风格的whiteButton）

对我来说padding: 2 对borderRadius: 10 来说已经足够了。

【讨论】：

【解决方案3】：

由于按钮内的文本延伸到按钮的边界，因此边框半径将不适用。您需要增加按钮大小或减小文本大小，以便在边界处留出空间以实现边界半径。此外，您需要确保文本在按钮内居中（使用justifyContent 和alignItems），以免触及按钮的边界。

【讨论】：