mobile - react-native:borderRadius不会正确构图组件

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。

最佳答案

要获得所需的内容，必须将“文本”框包装在另一个 View 中。更改borderRadius时，“ View ”将不会默认使用其他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演示。

关于mobile - react-native:borderRadius不会正确构图组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34733459/