我在 react-native 中创建 CSS 圆圈时遇到了一些问题。以下在 iPhone 6 Plus 中有效，但在所有其他 iPhone 中，它们变成了钻石。
circle: {
height: 30,
width: 30,
borderRadius: 30,
}
现在，如果我在 borderRadius 上使用 PixelRatio，它适用于除 iPhone 6 plus 之外的所有设备。 iPhone 6 plus 将其呈现为圆角框。
circle: {
height: 30,
width: 30,
borderRadius: 30 / PixelRatio.get(),
}
【问题讨论】：
标签： react-native
您的边框半径应该是宽度和高度的一半。如下：
circle: {
width: 44,
height: 44,
borderRadius: 44/2
}
【讨论】：
borderRadius: '50%' 在 React16 和 RN 0.49 中引发错误。我只是在谷歌搜索并找到此页面之前尝试过。
这些都不符合我的需求，如果您需要一个响应式圈子，您可以尝试使用我的解决方案：
第 1 步：从 react native 导入 Dimensions （和其他使用的元素）（或添加到现有的导入列表）
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() 2x 视网膜设备，因为结果是 15。
那么对于 iPhone 6 Plus，你确实会得到一个圆角框，因为结果是 10（像素比是 3）。
我很惊讶你说它在 iPhone 6 Plus 上工作 30 x 30 正方形。
【讨论】：
PixelRatio.get 不起作用并强调我们应该只使用 50% 的正方形边。
如果你想创建一个可以在任何设备上运行的圆圈，你唯一应该做的就是给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' }
})
【讨论】：
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 不好？
【讨论】：
我一直在使用 styled-components 包来设置我的 React Native 组件的样式，我发现的最简单的解决方案是将 border radius 设置为大于圆圈宽度一半的像素大小有。然后，对于任何小于该值的尺寸，它将默认为相当于 50% 的边界半径。
【讨论】：