用背景颜色反应原生边界半径

Question

在 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'
},
...

原文由 Chipe 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Nader Dabit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

杰斯：

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

款式：

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

原文由 Hossein 发布，翻译遵循 CC BY-SA 4.0 许可协议