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

Question

borderRadius样式属性不会正确更改组件的边框。

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

class Healthie extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.button} />
      </View>
    );
  }
};

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 version：0.17.0。

Answer 1

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

<View style={styles.container}>
  <View style={styles.button}>
    <Text style={{ backgroundColor: 'transparent' }}>Text</Text>
  </View>
</View>

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'
  }
});

查看this演示。

Answer 2

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

即可

overflow: hidden

它对我有用