리액트 네이티브에서 스타일의 기본 단위는 무엇입니까?

리액트 네이티브에서 스타일의 기본 단위는 무엇입니까?

저는 리액트 네이티브용 재료 디자인을 개발하고 있는 오픈 소스 프로젝트에 참여하고 있습니다.회사에서 차단되어 있어 패딩, 정렬 등을 통한 UI 레벨 향상을 할 수 없습니다.

이것은 서랍을 위한 재료 설계의 공식 사양입니다.

위 이미지에서 측정 단위는 dp입니다.

하지만 리액트 네이티브 코드에는 그런 단위가 없습니다."react native"라고 생각하면 px인지 dp인지 헷갈립니다.

React Native for Style의 Official Docs 구성 요소도 검토했습니다.어디에도 언급이 없네요.

내 코드는 다음과 같습니다.

const styles = {
    touchable: {
        paddingHorizontal: 16,
        marginVertical: 8,
        height: 48
    },
    item: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    icon: {
        position: 'relative',
    },
    value: {
        flex: 1,
        paddingLeft: 34,
        top: 2
    },
    label: {
        top: 2
    }
},

이게 픽셀인지 dp인지 알려주실 수 있나요?그리고 또...1px = 1dp?

문서에서:

리액트 네이티브의 모든 치수는 유닛리스이며 밀도에 의존하지 않는 픽셀을 나타냅니다.이 방법으로 치수를 설정하는 것은 화면 치수에 관계없이 항상 정확하게 같은 크기로 렌더링해야 하는 컴포넌트에 공통적입니다.

네, React Native의 유닛이 있습니다.dp픽셀로 변환하려면PixelRatio.getPixelSizeForLayoutSize()

브라우저에 익숙한 개발자 콘솔로 적극적으로 검사를 할 수 없는 것은 다소 혼란스러운 점이 있습니다.

dp 단위는 잘 모르지만 내가 아는 바로는width: 1는 화면의 픽셀 밀도에 따라 디바이스마다 다르게 렌더링됩니다(링크 참조).리액션 네이티브 문서에 따르면1픽셀 밀도가 높은 화면에서는 더 두껍게 렌더링됩니다.즉, 고밀도 화면에서는 저밀도 화면보다 정밀도가 높고 반응 원어민에서는 고밀도 dpi를 상정하지 않는 범용성을 목표로 하고 있기 때문에 논리적으로 들립니다.

아래 링크된 PixelRatio API를 사용하여 상세 요소(생각 테두리, 아이콘 등)의 크기를 계산하여 디바이스의 화면 밀도에 따라 렌더링 크기를 동적으로 조정할 수 있는 것으로 알고 있습니다.

https://facebook.github.io/react-native/docs/pixelratio.html#content

고려해야 할 것은 픽셀 비율입니다.픽셀은 절대값을 나타내고 픽셀비는 상대값을 나타냅니다.앱 화면과 컴포넌트가 반응하도록 하려면 픽셀 비율을 사용해야 합니다.

저는 이미 여러 앱에서 사용하고 있습니다.그렇게 해야 될 것 같아요.이게 당신의 질문에 답하길 바랍니다.

제가 알기로는 react js나 react native에서 사용하는 javascript 스타일링은 픽셀을 사용합니다.픽셀비는 다양한 크기의 모바일 기기 화면을 지원하는 데만 필요합니다.

언급URL : https://stackoverflow.com/questions/34493372/what-is-the-default-unit-of-style-in-react-native