在本地创建CSS圆

我在用react-native创建CSS圈子时遇到了一些麻烦。以下内容适用于iPhone 6 Plus，但在所有其他iPhone中，它们都是钻石。

circle: {
  height: 30,
  width: 30,
  borderRadius: 30,
}

现在，如果我在PixelRatio上使用它，borderRadius则可以在iPhone 6 plus以外的所有设备上使用。iPhone 6 plus将其渲染为带有圆角的盒子。

circle: {
  height: 30,
  width: 30,
  borderRadius: 30 / PixelRatio.get(),
}

您的边界半径应为宽度和高度的一半。如下所示：

circle: {
   width: 44,
   height: 44,
   borderRadius: 44/2
}

这些都不符合我的需要，如果您需要响应圈子，可以尝试使用我的解决方案：

第1步：从react native导入维度 （和其他使用的元素）（或添加到现有的导入列表中）

import { Dimensions, TouchableHighlight, Text } from 'react-native';

第2步：添加可触摸的元素（您可以计算设备的宽度或高度）

    <TouchableHighlight
      style = {{
        borderRadius: Math.round(Dimensions.get('window').width + Dimensions.get('window').height) / 2,
        width: Dimensions.get('window').width * 0.5,
        height: Dimensions.get('window').width * 0.5,
        backgroundColor:'#f00',
        justifyContent: 'center',
        alignItems: 'center'
      }}
      underlayColor = '#ccc'
      onPress = { () => alert('Yaay!') }
    >
      <Text> Mom, look, I am a circle! </Text>
    </TouchableHighlight>

第3步：享受响应式圆圈元素

borderRadius应该是正方形的一半。因此，无论您使用哪种像素比率，您的情况都是15。

它30 / PixelRatio.get()仅适用于2倍的视网膜设备，导致结果为15。然后，对于iPhone 6 Plus，您确实得到了一个圆角框，因为结果为10（像素比率为3）。

令您惊讶的是，它在30英寸30x30的iPhone 6 Plus上也能正常工作。

由于borderRadius样式需要数字作为值，因此不能使用borderRadius：50％。要绕圈，您要做的就是使用图像的宽度/高度，并使用2表示它。在这里了解更多：https : //github.com/refinery29/react-native-cheat-sheet

如果您想制作一个可以在任何设备上使用的圆，那么您唯一要做的就是给出相同height和width相同的值，然后给出borderRadius一个非常高的值，我个人给它定为1000，因此对于大多数案件

circle :{
 height : 30 ,
 width :30,
 borderRadius: 1000,
}

我一直在使用该styled-components包来设置我的React Native组件的样式，发现的最简单的解决方案是将border radiuspx的大小设置为大于圆形将具有的宽度的一半。然后，对于小于该值的任何大小，默认情况下将等于50％的边界半径。