javascript - React Native reunojen säde taustavärillä

React Nativen avulla borderRadius toimii, mutta napille annettu taustaväri pysyy neliönä. Mitä tässä tapahtuu?

JS

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

Tyyli

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

Vastaus #1

Kokeile siirtää painikkeen tyylittely suoraan TouchableHighlight-elementtiin:

Tyylit:

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

Painike (sama):

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

Vastaus #2

Sinun pitäisi lisätä overflow: hidden tyyleihisi:

Js :

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

Tyylit :

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