Реагировать радиус рамочной границы с цветом фона

В React Native работает 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'
},
...

введите описание изображения здесь

Ответы

Ответ 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>

введите описание изображения здесь

Ответ 2

Если вы используете react-native-button, вы должны добавить overflow: hidden в свои стили:

Js:

import Button from 'react-native-button';

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

Стили:

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