React Native: Flex를 사용하여 모든 화면 크기에 대한 간단한 반응형 이미지.

스마트폰은 모양과 크기가 다양하므로 콘텐츠가 그에 따라 반응하는 것이 무엇보다 중요합니다.

다양한 화면에 디자인을 전달할 때 이미지가 문제가 될 수 있습니다. 만병통치약 전략은 오늘날의 다양한 스마트폰 환경에서 작동하지 않으며 사용자 경험의 악몽을 초래할 가능성이 높습니다.

Flexbox 모듈은 데카르트 좌표계를 기반으로 합니다. 이 좌표계는 직교하는 두 선에 걸친 거리로 잘 알려져 있습니다.
X축과 Y축, 데카르트 시스템을 염두에 두고 컨테이너는 위의 이미지와 같이 수평으로 실행되는 주축과 수직으로 실행되는 교차축으로 계산할 수 있습니다.

이미지를 담는 X축과 Y축으로 컨테이너를 고려하십시오.

이미지를 담는 X축과 Y축으로 컨테이너를 고려하십시오.

예를 들어:

<View style={styles.container}> // X & Y axis.
<Image /> // value or items`
</View>

컨테이너 값에는 요구 사항에 따라 높이와 너비가 있습니다.

예를 들어:

container : {width: 180, height: 200}

컨테이너 내부의 이미지가 변경 사항에 적응하도록 하기 위해 백분율을 사용하여 크기가 항상 컨테이너의 높이 및 너비와 같도록 할 수 있습니다.

따라서 이미지를 반응형으로 만들기 위해 높이와 너비 값을 100%로 설정하고 크기 조정 모드를 커버로 설정하면 됩니다.

<View style={{
    width: 180,
    height: 200,
    aspectRatio: 1 * 1.4,

    }}>
    <Image
    source={{uri : item.image.url}}

    style={{

    resizeMode: ‘cover’,
    width: ‘100%’,
    height: ‘100%’

    }}
    />
</View>

이미지의 높이와 너비를 100%로 설정하고 크기 조정 모드를 덮도록 설정하면 이미지가 X축과 Y축 또는 컨테이너 내부의 컨테이너 부동산의 100%를 비례적으로 차지합니다. 컨테이너 크기에 비례하는 종횡비를 유지하면서 이미지의 크기를 균일하게 조정합니다.

결론적으로 기하학의 적용은 확장성 측면에서 효과적인 자원이 될 수 있습니다. 상자의 단순한 개념과 그 내용물의 호환성은 애플리케이션에서 응답성이 작동하는 방식을 생각하는 좋은 방법입니다. 컨테이너의 스타일이 워터폴 효과와 유사하게 이미지 스타일보다 우선한다는 점에 유의하는 것이 중요합니다. 즉, 컨테이너의 값이 UI에서 이미지가 얼마나 높이 또는 넓게 확장될 수 있는지를 나타내는 방식입니다.