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

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

永远不要将 borderRadius 给你，<Text />总是将其包裹<Text />在你的<View />或你的<TouchableOpacity/>.

borderRadius on<Text />将在 Android 设备上完美运行。但在 IOS 设备上它不起作用。

因此，请在实践中将其包裹在or<Text/>内部，然后将 borderRadius 设置为or ，以便它可以在 Android 和 IOS 设备上运行。<View/><TouchableOpacity/><View /><TouchableOpacity />

例如：-

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

-谢谢

Answer 4

请记住， 如果您想给 Text 提供背景颜色，然后还为 borderRadius 在这种情况下也写溢出：“隐藏”具有背景颜色的文本也将获得半径，否则不可能实现，除非您用 View 包装它并提供背景颜色和到它的半径。

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