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

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

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

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

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

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

<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()只适用于2x视网膜设备，因为结果是15。然后对于iPhone 6 Plus，您确实会得到一个圆形框，因为结果是10（像素比为3）。
我很惊讶你说它在iPhone 6 Plus上工作，30个30 x30平方。

如果你想做一个在任何设备上都能工作的圆，你唯一应该做的就是给予相同的height和width相同的值，然后给borderRadius一个非常高的值，我个人给它1000，这样它就足够大了，在大多数情况下

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

由于borderRadius样式需要数字作为值，因此您不能使用borderRadius：50%。要画圆，你所要做的就是使用你的图像的宽度/高度，并将其除以2。阅读更多内容：https://github.com/refinery29/react-native-cheat-sheet

基本上只需要应用相同的height, width，在borderRadius中必须除以2
例如height : 50, width :50 borderRadius : 50/2

只是圈

var circle = {
    height: 30,
    width: 30,
    borderRadius: 15
}

带设备高度的响应圆

var circle = {
    height: Dimensions.get('window').height * 0.1,
    width: Dimensions.get('window').height * 0.1,
    borderRadius: Math.round((Dimensions.get('window').height + Dimensions.get('window').width) / 2)
}

带设备宽度的响应圆

var circle = {
    height: Dimensions.get('window').width * 0.1,
    width: Dimensions.get('window').width * 0.1,
    borderRadius: Math.round((Dimensions.get('window').height + Dimensions.get('window').width) / 2)
}

示例代码

import React, { useEffect, useState, useRef } from 'react'
import { Dimensions, SafeAreaView, StyleSheet, Text, View } from 'react-native'

const { height, width } = Dimensions.get('window')

function roundOff(v) {
    return Math.round(v)
}

function dimensions() {

    var _borderRadius = roundOff((height + width) / 2),
        _height = roundOff(height),
        _width = roundOff(width)

    return { _borderRadius, _height, _width }
}

export default function ResponsiveCircle() {

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.circleView}>
                <Text style={styles.text}>
                    Responsive{'\n'}Circle
                </Text>
            </View>
        </SafeAreaView>
    )

}

const commonStyles = { alignItems: 'center', justifyContent: 'center', }

const styles = StyleSheet.create({
    container: { flex: 1, ...commonStyles },
    circleView: { height: dimensions()._height * 0.2, width: dimensions()._height * 0.2, borderRadius: dimensions()._borderRadius, backgroundColor: 'tan', ...commonStyles },
    text: { textAlign: 'center', lineHeight: 25, color: 'black', fontWeight: 'bold' }
})

我一直在使用styled-components包来样式化我的React Native组件，我发现最简单的解决方案是将border radius的px大小设置为大于圆形宽度的一半。然后，对于任何小于该值的尺寸，它将默认为相当于50%的边框半径。

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>

顺便说一句，有人能解释为什么borderRadius:1000是坏的吗？

我知道这是一个老问题，但我想用最简单的方法回答。只要将borderRadius属性设置为高值，它就会自动画一个圆。使用此解决方案，您不需要指定宽度或高度。（我会的，因为我只有一个没有内容的视图）

/* Component */
<View style={styles.button}></View>

/* StyleSheet */
button: {
   width: 80,
   height: 80,
   backgroundColor: "#000000",
   borderRadius: 1000 // High value
}