用背景颜色反应本地边界半径

在本机反应，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'
},
...

enter image description here

290144 次浏览
小开
最佳答案

尝试移动按钮样式到 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>

enter image description here

小开

你应该在你的样式中加入 overflow: hidden:

Js:

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

风格:

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

应用以下代码行:

<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"
/>
小开

永远不要给你的 <Text />边界半径总是包裹在你的 <View />或者你的 <TouchableOpacity/>中的 <Text />。

<Text />上的 borderRadius 在 Android 设备上可以很好地工作，但在 IOS 设备上就不行了

因此，在你的实践中保持这一点，将 <Text/>封装在 <View/>或 <TouchableOpacity/>中，然后将 borderRadius 赋予 <View />或 <TouchableOpacity />，这样它既可以在 Android 上工作，也可以在 IOS 设备上工作。

例如:-

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

谢谢

小开

如果你想给文本一个背景颜色，然后边界半径在这种情况下也写溢出:’隐藏’你的文本有一个背景颜色也会得到半径，否则它是不可能实现的，除非你包装它与视图，并给它的背景颜色和半径。

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

我通过更新来解决这个问题:

touchable: {
borderWidth: 0.2;
...
};

生存

touchable: {
borderWidth: 1;
...
};

看起来十进制值(0.2)在 android 上不能使用 borderWidth


提交答案