button - 边框半径不适用于 Button

Question

我想用 touchableOpacity 创建一个边框半径按钮。

我试过这种风格：

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

但按钮看起来像这样：

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

你有想法吗 ？

编辑 ：

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

Answer 1

从反应原生材料设计，

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

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

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

Answer 2

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

Answer 3

好的，问题出在我的代码中。我还没有看到，但我添加了一个视图，并且 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>