在react-native中创建css圈

Question

我在使用react-native创建css圈时遇到了一些麻烦。以下适用于iPhone 6 Plus，但在所有其他iPhone中，它们都会成为钻石。

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

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

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

Answer 1

borderRadius应该是广场的一半。在你的情况下15 - 无论设备具有什么像素比率。

仅对2x视网膜设备使用{{1}}，结果为15。 然后对于iPhone 6 Plus，你确实得到一个圆角框，因为结果为10（像素比为3）。

我很惊讶你的说法适用于iPhone 6 Plus，30英尺30平方米。

Answer 2

你的边界半径应该是宽度和高度的一半。如下所示：

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

Answer 3

由于borderRadius样式需要number作为值，因此无法使用borderRadius：50％。要制作圆圈，您只需使用图像宽度/高度并将其与2相比较。在此处阅读更多内容： https://github.com/refinery29/react-native-cheat-sheet

Answer 4

如果您想制作一个可以在任何设备上使用的圆，则唯一要做的就是赋予相同的height和width相同的值，然后赋予{{1} }我个人给了它一个非常高的价值1000，因此在大多数情况下它足够大了

borderRadius

Answer 5

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

第1步：从本机（或添加到现有导入列表）中导入维度 （以及其他已用元素）

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步：享受响应式圆圈元素

Answer 6

我一直在使用styled-components包来设置React Native组件的样式，而我发现的最简单的解决方案是将border radius设置为以px为单位的大小，该大小大于宽度的一半这个圈子永远都有。然后，如果尺寸小于该值，它将默认等于50％的边界半径。

Answer 7

onLayout 为我工作。

计算宽高保持1:1的纵横比，然后设置borderRadius为width/2

const [circleSytle, setCircleStytle] = useState();
...
function calCircleStyle(layoutEvent) {
  let {width, height} = layoutEvent.nativeEvent.layout;
  let dim = width > height ? width : height;

  setCircleStyle({width:dim, height:dim, borderRadius:dim/2});
}

然后像这样将其应用到您的视图中：

<View onLayout={calCircleStyle} style={circleStyle}>
...
</View>