javascript React Native Border Radius with background color

lxkprmvk  于 2023-06-04  发布在  Java
关注(0)|答案(7)|浏览(223)

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

mrfwxfqh

mrfwxfqh1#

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

7qhs6swi

7qhs6swi2#

你应该把overflow: hidden添加到你的样式中:
Js:

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

款式:

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

5anewei63#

永远不要给予borderRadius给你的<Text />,总是把<Text />包在你的<View /><TouchableOpacity/>中。

<Text />上的borderRadius将在Android设备上完美运行。但在iOS设备上,它将无法工作。

因此,请在您的实践中将<Text/> Package 在<View/><TouchableOpacity/>中,然后给予borderRadius赋予<View /><TouchableOpacity />,以便它在Android和IOS设备上都可以工作。
例如:

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

prdp8dxp4#

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

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

h7appiyu5#

应用下面的代码行:

<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"
/>
hkmswyz6

hkmswyz66#

我通过更新解决了它:

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

成为

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

看起来像十进制值(0.2)不与android上的borderWidth一起使用

fcy6dtqo

fcy6dtqo7#

borderRadius将适用于Android和iOS两种设备,但以下属性在iOS设备中不起作用:

borderTopLeftRadius, 
borderTopRightRadius, 
borderBottomLeftRadius,
borderBottomRightRadius

所以你的代码总是这样写的:
示例1:这将完美地适用于(iOS和Android)两种设备

<View style={{borderTopRightRadius: 25, borderBottomLeftRadius: 25}}>
   <Text>Submit</Text>
</View>

示例2:这将适用于(iOS和Android)两种设备

<Text style={{borderRadius: 25, overflow: 'hidden'}}>Submit</Text>

示例3:这将不适用于iOS设备(适用于Android设备)

<Text style={{borderTopRightRadius: 25, borderBottomLeftRadius: 25}}>Submit</Text>

相关问题