ボタンでボーダー半径が機能しない

Question

touchableOpacityでボーダー半径ボタンを作成したいとします。

私はこのスタイルを試してみました：

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

しかし、ボタンは次のようになります。

そして、私はオーバーフロー削除する場合：

： "隠された" と、それはこのようになります

Do yああ、考えがある？

EDIT：

透明にテキストのbackgroundColorを設定した後、私はオーバーフローと同じ結果を持っている：「隠された」が、テキストで私のテキストはtouchableopacityの外に

あるようですが、ちょうど下に

Answer 1

ボタン内のテキストがボタンの境界まで伸びるため、ボーダー半径は適用されません。ボーダーの半径を実現するために、境界にスペースがあるように、ボタンのサイズを大きくするかテキストサイズを小さくする必要があります。また、ボタンの境界に触れないように、ボタンの内側にテキストが中央に配置されていることを確認する必要があります（justifyContentとalignItems）。それのフル 幅が親コンテナだ消費とnative material design反応から

Answer 2

、

ボタンコンポーネントは、触れることができるボタンをレンダリングします。

親の全幅を消費します。これは、埋め込みをTouchableOpacityに追加することを意味します。 （これはあなたのスタイルのwhiteButtonです）borderRadius: 10するのに十分であるpadding: 2私にとって

。

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>