在react-native中创建css圈

Question

我在使用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(),
}

Answer 1

你的边界半径应该是宽度和高度的一半.如下:

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

Answer 2

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

它30 / PixelRatio.get()仅适用于2x视网膜设备,因此结果为15.然后对于iPhone 6 Plus,您确实得到一个圆形框,因为结果为10(像素比为3).

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

Answer 3

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

第1步:从native 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步:享受响应式圆圈元素

Answer 4

如果你想制作一个可以在任何设备上工作的圆圈，你唯一应该做的就是给出相同height和width相同的值，然后给出borderRadius一个非常高的值，我个人给它 1000 这样它就足够大了案件

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

Answer 5

由于borderRadius样式需要number作为值,因此不能使用borderRadius:50%.要制作圆圈,你只需要使用你的图像宽度/高度并将其与2相比较.阅读更多信息:https: //github.com/refinery29/react-native-cheat-sheet

Answer 6

基本上只需要应用相同的方法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' }
})