用背景颜色反应原生边框半径

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

记住 如果你想给 Text 一个背景色，然后还有 borderRadius 在这种情况下也写溢出：'隐藏'你的具有背景色的文本也将获得半径，否则不可能实现，除非你用 View 包裹它并给出背景色和半径到它。

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

Answer 4

应用下面的代码行：

<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 5

从不给您的<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>

-谢谢