ネイティブボーダー半径と背景色の反応

Question

リアクトネイティブでは、borderRadiusは機能していますが、ボタンに与えられた背景色は四角いままです。ここで何が起こっているのですか？

JS

<TouchableHighlight 
    style={styles.submit} 
    onPress={() => this.submitSuggestion(this.props)} 
    underlayColor='#fff'> 
    <Text style={[this.getFontSize(),styles.submitText]}>Submit</Text> 
</TouchableHighlight> 

スタイル

... 
submit:{ 
    marginRight:40, 
    marginLeft:40, 
    marginTop:10, 
}, 
submitText:{ 
    paddingTop:20, 
    paddingBottom:20, 
    color:'#fff', 
    textAlign:'center', 
    backgroundColor:'#68a0cf', 
    borderRadius: 10, 
    borderWidth: 1, 
    borderColor: '#fff' 
}, 
... 

Answer 1

はTouchableHighlight自体にボタンのスタイルを移動してみてください：

スタイル：

submit:{ 
    marginRight:40, 
    marginLeft:40, 
    marginTop:10, 
    paddingTop:20, 
    paddingBottom:20, 
    backgroundColor:'#68a0cf', 
    borderRadius:10, 
    borderWidth: 1, 
    borderColor: '#fff' 
    }, 
    submitText:{ 
     color:'#fff', 
     textAlign:'center', 
    } 

ボタン（同）：

<TouchableHighlight 
    style={styles.submit} 
    onPress={() => this.submitSuggestion(this.props)} 
    underlayColor='#fff'> 
    <Text style={[this.getFontSize(),styles.submitText]}>Submit</Text> 
</TouchableHighlight> 

Answer 2

あなたがあなたのスタイルにoverflow: hiddenを追加する必要がありますreact-native-buttonを使用する場合：

のJs：

import Button from 'react-native-button'; 

<Button style={styles.submit}>Submit</Button> 

の

スタイル：

submit { 
    backgroundColor: '#68a0cf'; 
    overflow: 'hidden'; 
}