Reagire Raggio bordo nativo con colore di sfondo

Question

In React Native, borderRadius funziona ma il colore di sfondo assegnato al pulsante rimane quadrato. Che cosa sta succedendo qui?

JS

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

Stile

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

provare a spostare il pulsante di styling per la TouchableHighlight stesso:

Stili:

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

Button (stessa):

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

Answer 2

Se si utilizza react-native-button si dovrebbe aggiungere overflow: hidden i vostri stili:

Js:

import Button from 'react-native-button'; 

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

Stili:

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