在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'
},
...
7条答案
按热度按时间mrfwxfqh1#
尝试将按钮样式移动到
TouchableHighlight
本身:样式:
按钮(同):
7qhs6swi2#
你应该把
overflow: hidden
添加到你的样式中:Js:
款式:
5anewei63#
永远不要给予borderRadius给你的
<Text />
,总是把<Text />
包在你的<View />
或<TouchableOpacity/>
中。<Text />
上的borderRadius将在Android设备上完美运行。但在iOS设备上,它将无法工作。因此,请在您的实践中将
<Text/>
Package 在<View/>
或<TouchableOpacity/>
中,然后给予borderRadius赋予<View />
或<TouchableOpacity />
,以便它在Android和IOS设备上都可以工作。例如:
prdp8dxp4#
记住如果你想给予文本一个backgroundcolor,然后也borderRadius在这种情况下也写溢出:'hidden'你的文本有一个背景颜色也会得到半径,否则它是不可能实现的,除非你用View Package 它,并给它backgroundcolor和半径。
h7appiyu5#
应用下面的代码行:
hkmswyz66#
我通过更新解决了它:
成为
看起来像十进制值(0.2)不与android上的borderWidth一起使用
fcy6dtqo7#
borderRadius
将适用于Android和iOS两种设备,但以下属性在iOS设备中不起作用:所以你的代码总是这样写的:
示例1:这将完美地适用于(iOS和Android)两种设备
示例2:这将适用于(iOS和Android)两种设备
示例3:这将不适用于iOS设备(适用于Android设备)