react-native:borderRadius不会将组件框架正确

该borderRadius风格属性不正确地更改组件的边框.

我希望在红色背景上看到一个没有任何空白区域的绿色圆圈.相反,我看到了这一点.

class Healthie extends React.Component {
  render() {
    return (
      
        
      
    );
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  button: {
    backgroundColor: 'green',
    borderRadius: 50,
    width: 100,
    height: 100,
    textAlign: 'center'
  }
});

react-native版本:0.17.0.

要获得您正在寻找的内容,您将不得不将文本框包装在另一个视图中.更改borderRadius时,视图不会默认为另一种BG颜色:

  
    Text
  


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  button: {
    backgroundColor: 'green',
    borderRadius: 50,
    width: 100,
    height: 100,
    textAlign: 'center',
    flexDirection:'row', 
    alignItems:'center', 
    justifyContent:'center'
  }
});

看看这个演示.

无需在视图中包含按钮或文本,只需将其放在您的样式上即可

overflow: hidden

这个对我有用