Javascript 用背景颜色反应原生边框半径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35030758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Native Border Radius with background color
提问by Chipe
In React Native, borderRadiusis working but the background color given to the button stays a square. What is going on here?
在 React Native 中，borderRadius正在工作，但给按钮的背景颜色保持正方形。这里发生了什么？
JS
JS
<TouchableHighlight
style={styles.submit}
onPress={() => this.submitSuggestion(this.props)}
underlayColor='#fff'>
<Text style={[this.getFontSize(),styles.submitText]}>Submit</Text>
</TouchableHighlight>
Style
风格
...
submit:{
marginRight:40,
marginLeft:40,
marginTop:10,
},
submitText:{
paddingTop:20,
paddingBottom:20,
color:'#fff',
textAlign:'center',
backgroundColor:'#68a0cf',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff'
},
...
回答by Nader Dabit
Try moving the button styling to the TouchableHighlightitself:
尝试将按钮样式移动到它TouchableHighlight本身：
Styles:
款式：
submit:{
marginRight:40,
marginLeft:40,
marginTop:10,
paddingTop:20,
paddingBottom:20,
backgroundColor:'#68a0cf',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText:{
color:'#fff',
textAlign:'center',
}
Button (same):
按钮（相同）：
<TouchableHighlight
style={styles.submit}
onPress={() => this.submitSuggestion(this.props)}
underlayColor='#fff'>
<Text style={[this.getFontSize(),styles.submitText]}>Submit</Text>
</TouchableHighlight>
回答by Hossein
You should add overflow: hiddento your styles:
您应该添加overflow: hidden到您的样式中：
Js:
JS：
<Button style={styles.submit}>Submit</Button>
Styles:
款式：
submit {
backgroundColor: '#68a0cf';
overflow: 'hidden';
}
回答by mukul soni
Never give borderRadius to your <Text />always wrap that <Text />inside your <View />or in your <TouchableOpacity/>.
永远不要给 borderRadius 给你<Text />总是将它包裹<Text />在你的<View />或在你的<TouchableOpacity/>.
borderRadius on <Text />will work perfectly on Android devices. But on IOS devices it won't work.
borderRadius on<Text />将在 Android 设备上完美运行。但在 IOS 设备上它不起作用。
So keep this in your practice to wrap your <Text/>inside your <View/>or on <TouchableOpacity/>and then give the borderRadius to that <View />or <TouchableOpacity />so that it will work on both Android as well as on IOS devices.
因此，保持这在实践中来包装<Text/>内的<View/>或<TouchableOpacity/>然后给borderRadius到<View />或<TouchableOpacity />使之在同时在Android和iOS设备上运行。
For example:-
例如：-
<TouchableOpacity style={{borderRadius: 15}}>
<Text>Button Text</Text>
</TouchableOpacity>
-Thanks
-谢谢
回答by sumit kumar pradhan
Apply the below line of code :
应用以下代码行：
<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"
/>
