javascript - React Native Zaoblenie okrajov s farbou pozadia

V React Native borderRadius funguje, ale farba pozadia priradená tlačidlu zostáva v tvare štvorca. Čo sa tu deje?

JS

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

Štýl

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

Odpoveď č. 1

Skúste presunúť štýl tlačidla priamo na TouchableHighlight:

Štýly:

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

Tlačidlo (rovnaké):

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

Odpoveď č. 2

Mali by ste pridať overflow: hidden do svojich štýlov:

Js :

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

Štýly :

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

Súvisiace články