使用背景色响应本机边框半径

javascript react-native styles

2022-08-30 04:46:21

在 React Native 中，正在工作，但给按钮的背景色保持正方形。这是怎么回事？borderRadius

断续器

<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

您应该添加到样式中：overflow: hidden

Js：

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

风格：

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