边框半径不适用于Button

Question

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

我试过这种风格：

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

但按钮看起来像这样：

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

你有什么想法吗？

编辑：

在将文本的backgroundColor设置为透明后，我得到与溢出相同的结果：“隐藏”但是文本正好在下面这就像我的文字超出了touchableopacity

Answer 1

来自反应native material design，

  

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

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

对我而言padding: 2足以borderRadius: 10。

Answer 2

由于按钮内的文本会延伸到按钮的边界，因此边框半径将不适用。您需要增加按钮大小或减小文本大小，以便边界处有空间以允许实现边界半径。此外，您需要确保文本在按钮内居中（使用alignItems和{ "_id" : "00007cASDASDASDAS32423423", "workDate" : ISODate("2017-01-20T00:00:00.000+00:00"), "hours" : 6.0, "worker" : { "$ref" : "T_WORKERS", "$id" : "f3f849d1-8777-4066-bdc6-64625475bbff" }, "project" : { "$ref" : "T_PROJECTS", "$id" : "03b80b87-dc3b-4dc3-88c4-2b3334758459" } } ），以便它不会触及按钮的边界。

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>

Afer：

<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>