用背景颜色反应本机边框半径

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

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>

Answer 2

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

Js:

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

样式：

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

Answer 3

应用以下代码行：

<TextInput
  style={{ height: 40, width: "95%", borderColor: 'gray', borderWidth: 2, borderRadius: 20,  marginBottom: 20, fontSize: 18, backgroundColor: '#68a0cf' }}
  // Adding hint in TextInput using Placeholder option.
  placeholder=" Enter Your First Name"
  // Making the Under line Transparent.
  underlineColorAndroid="transparent"
/>

Answer 4

永远不要给你的 <Text /> borderRadius 总是把 <Text /> 包裹在你的 <View /> 或你的 <TouchableOpacity/>.

<Text /> 上的 borderRadius 将在 Android 设备上完美运行。但是在 IOS 设备上它不会工作。

所以在你的练习中保持这一点，将你的 <Text/> 包裹在你的 <View/> 或 <TouchableOpacity/> 上，然后将 borderRadius 赋予 <View /> 或 <TouchableOpacity /> 这样它就可以在 Android 和 IOS 设备上工作。

例如：-

<TouchableOpacity style={{borderRadius: 15}}>
   <Text>Button Text</Text>
</TouchableOpacity>

-谢谢

Answer 5

记得如果你想给 Text 一个背景颜色，然后在这种情况下也给 borderRadius 也写 overflow:'hidden' 你有背景颜色的文本也会得到半径，否则这是不可能实现的，除非你用 View 包裹它并给它 backgroundcolor和它的半径。

<Text style={{ backgroundColor: 'black', color:'white', borderRadius:10, overflow:'hidden'}}>Dummy</Text>

用背景颜色反应本机边框半径

React Native Border Radius with background color

javascript

styles

react-native