반응형 CSS 원 만들기

반응형 CSS 원 만들기

반응하는 CSS 서클을 만드는 데 문제가 좀 있어.다음은 아이폰6플러스에서 작동하지만 다른 아이폰에서는 다이아몬드가 된다.

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

이제 PixelRatio를 사용하면borderRadius아이폰6 플러스만 빼고 다 된다. 아이폰6 플러스는 모서리가 둥근 박스로 렌더링한다.

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

국경 반경은 너비의 반과 높이가 되어야 한다.아래와 같이:

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

이러한 모든 것이 내 요구에 부합하지 않는다. 반응하는 원이 필요하다면 내 솔루션을 사용해 보십시오.

1단계: reactive native에서 치수(및 기타 사용된 요소) 가져오기(또는 기존 가져오기 목록에 추가)

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단계: 반응하는 동그라미 요소를 즐기십시오.

보더레이디우스는 광장의 반쪽이어야 한다.예를 들어, 장치의 픽셀 비율이 어떻게 되든 상관없이 15개 입니다.

와 잘 통한다.30 / PixelRatio.get()2배의 망막 소자에 대해서만, 결과는 15이다.그러면 아이폰6 플러스의 경우 결과가 10(픽셀비율은 3)이기 때문에 정말 둥근 박스를 받게 된다.

30x30 정사각형에서 30으로 아이폰6 플러스에서 작동했다고 말하니 놀랍다.

어떤 기기에서든 작동할 원을 만들려면 같은 것을 줘야 한다.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에borderRadius2로 나누어야 한다

예시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를 너비/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>

BTW, 왜 그런지 설명해줄 사람 있어?borderRadius:1000나쁘니?

나는 줄곧 그 제품을 사용해 왔다.styled-components내 Resact Native 구성 요소의 스타일을 지정하는 패키지 및 내가 찾은 가장 쉬운 솔루션은border radius원의 폭의 절반보다 큰 px 크기.그리고 나서 그것은 그것보다 더 작은 사이즈에 대해 50%의 경계 반지름과 동등한 수준으로 디폴트될 것이다.

참조URL: https://stackoverflow.com/questions/30404067/creating-css-circles-in-react-native