如何在本机反应中使用百分比制作圆形视图？答案

【问题标题】：How to make a circle view using percentage in react native?如何在本机反应中使用百分比制作圆形视图？
【发布时间】：2019-11-28 12:47:46
【问题描述】：

如何在 React Native 中使用百分比制作圆形视图？根据我的视图大小，使用borderRadius 似乎并不总是有效。

我的视图应该是一个圆圈：

        <ScrollView style={styles.container}>

            <View style={styles.circle}>
                <Icon style={styles.icon} type='FontAwesome' name='phone'/>
            </View>

        </ScrollView>

我的风格：

const styles = StyleSheet.create({

    container:{
        flex: 1,
    },
    circle:{
        alignSelf: 'center',
        marginTop: '30%',
        borderWidth: 1,
        padding: '20%',
        borderRadius: 200,
    },
    icon:{
        fontSize: 80,
    },

})

【问题讨论】：

也许不是最佳做法，但您可以为borderRadius 使用一个非常大的数字（例如9999），这总是会产生一个圆圈。
@L.Palaiokostas 如果图标不是一个完美的正方形，即使我为borderRadius 输入了一个非常大的数字，它仍然不会变成一个完美的圆形，但我无法思考更好的方法
它不必是一个完美的正方形...它也可以在一个非完美的正方形中工作，只要它是一个正方形 (x*x)。如果不是正方形，就没有办法把它变成圆形……

标签： css react-native

【解决方案1】：

将边框半径设置为视图宽度/高度的一半。例如，如果您有

的视图

宽度：10，高度：10

然后

边界半径：5

会起作用的。

【讨论】：

但是这样我会设置容器的宽度和高度

【解决方案2】：

var Circle = React.createClass({
render: function() {
    return (
        <View style={styles.circle} />
    )
}
})

circle: {
    width: 100,
    height: 100,
    borderRadius: 100/2,
    backgroundColor: 'red'
}

供参考here are more shapes

【讨论】：