React Native의 동적 높이, 너비 및 종횡비

간단한 수평 FlatList를 작성하기 위해 이 디자인이 제공되었다고 가정해 봅시다. 플랫 목록에서 항목의 너비와 높이를 어떻게 동적으로 찾을 수 있습니까? 다른 방법으로 할 수 있지만 최근 코드 읽기 여정에서 동료로부터 멋진 요령을 배웠습니다. 먼저 아이템의 폭을 알아볼까요?



위의 이미지에서 볼 수 있듯이 전체 화면 너비는 376이고 Figma에서 항목 너비를 검사하면(위 이미지에는 표시되지 않음) 항목 너비는 240입니다. 따라서 이것을 일반 측정으로 사용하면 화면 너비에 따라 항목 너비를 확인할 수 있습니다.

itemWidth = screenWidth * 376/240 OR screenWidth * 0.64

플랫 목록의 항목이 전체 너비의 64%를 차지한다는 의미입니다. 이제 높이를 어떻게 정의합니까? 너비와 종횡비에서 동적 높이를 얻을 수 있습니다.

// In Figma, our item width is 240 and height is 198
// so first we get the aspect ratio
const CARD_ASPECT_RATIO = 240 / 198; // aspectRatio = width / height
const CARD_WIDTH = Metrics.screenWidth * 0.64; // this we already found out
const CARD_HEIGHT = CARD_WIDTH / CARD_ASPECT_RATIO;

동일한 방법에 따라 내부 콘텐츠 높이와 너비를 찾을 수 있습니다. 이 경우에는 배경이 비어 있는 상단 섹션과 그 안에 텍스트가 있는 하단 섹션이 있습니다. 따라서 상단 섹션 높이와 너비를 동적으로 얻기 위해 동일한 공식을 사용할 수 있습니다.

const IMAGE_CONTAINER_ASPECT_RATIO = 240 / 140;
const IMAGE_CONTAINER_WIDTH = CARD_WIDTH;
const IMAGE_CONTAINER_HEIGHT = IMAGE_CONTAINER_WIDTH / IMAGE_CONTAINER_ASPECT_RATIO;

마지막으로 모두 합치면 다음과 같이 됩니다.

import * as React from 'react';
import { Text, View, StyleSheet, FlatList, Dimensions } from 'react-native';
import { Card } from 'react-native-paper';

const { width, height } = Dimensions.get('window');

const Metrics = {
  section: 16,
  halfSection: 8,
};

const CARD_WIDTH = width * 0.64;
const CARD_ASPECT_RATIO = 240 / 198;
const CARD_HEIGHT = CARD_WIDTH / CARD_ASPECT_RATIO;
const IMAGE_CONTAINER_ASPECT_RATIO = 240 / 140;
const IMAGE_CONTAINER_WIDTH = CARD_WIDTH;
const IMAGE_CONTAINER_HEIGHT =
  IMAGE_CONTAINER_WIDTH / IMAGE_CONTAINER_ASPECT_RATIO;

const styles = StyleSheet.create({
  topCars: {
    height: CARD_HEIGHT,
    width: CARD_WIDTH,
    borderRadius: 12,
    marginRight: Metrics.halfSection,
  },

  topCarsImage: {
    width: IMAGE_CONTAINER_WIDTH,
    height: IMAGE_CONTAINER_HEIGHT,
    borderRadius: 12,
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 0,
  },
});

export default function App() {
  return (
    <View style={{ flex: 1, paddingTop: 48 }}>
      <FlatList
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={{
          paddingHorizontal: Metrics.section,
          paddingBottom: Metrics.section,
        }}
        horizontal={true}
        data={[
          {
            name: 'KFC',
            location: 'Bukit Bintang, Kuala Lumpur',
            bg: 'cyan',
          },
          {
            name: 'MacDonalds',
            location: 'Damansara, Kuala Lumpur',
            bg: 'orange',
          },
          {
            name: 'Pizza Hut',
            location: 'Damansara Jaya, Kuala Lumpur',
            bg: 'yellow',
          },
          {
            name: 'Pak Punjab',
            location: 'Bukit Heights, Kuala Lumpur',
            bg: 'grey',
          },
        ]}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item, index }) => {
          return (
            <Card style={styles.topCars}>
              <View
                style={[styles.topCarsImage, { backgroundColor: item.bg }]}
              />
              <View style={{ padding: 12 }}>
                <Text>{item.name}</Text>
                <Text>{item.location}</Text>
              </View>
            </Card>
          );
        }}
      />
    </View>
  );
}

또한 실제로 작동하는 것을 보고 싶다면 스낵 링크를 확인하십시오.
https://snack.expo.io/@saad-bashar/dynamic-height-and-width