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

看看这个演示.

Answer 2

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

overflow: hidden

这个对我有用