React Native의 가운데 이미지

MD Aminul Islam 2024년2월15일
React Native의 가운데 이미지

React-Native에서는 앱에 이미지를 구현하는 것이 매우 쉽습니다. 구현 후에는 이미지가 더 좋아 보이도록 완벽하게 정렬해야 합니다.

이 기사에서는 React-Native 앱의 이미지 항목을 중앙에 배치하는 방법을 살펴보겠습니다. 주제를 더 쉽게 만들기 위해 예제와 설명을 살펴보겠습니다.

React Native의 가운데 이미지

다양한 목적을 위해 이미지 항목을 중앙 집중화해야 하는 경우가 있습니다. 예를 들어 앱의 프리로더를 디자인하는 경우 프리로더 창에 프리로더 이미지를 제공해야 합니다. 이 이미지는 중앙에 정렬되어야 합니다.

아래 예제에서는 React-Native 앱의 중앙에 이미지 항목을 배치하는 방법을 설명합니다. 예제의 코드 스니펫은 다음과 같습니다.

// importing necessary packages
import {StatusBar} from 'expo-status-bar';
import {Image, StyleSheet, Text, View} from 'react-native';

export default function App() {
  return (  // Including the image
    <View style={styles.container}>
      <Text>Simple Image</Text>
      <Image
        style={styles.img}
        source={{
          uri: 'https://www.delftstack.com/assets/img/logo.png',
}
}
/>
      <StatusBar style="auto" / > <
    /View>
  );
}
/ / Providing style to the app
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  img: {
    width: 200,
    height: 200,
    resizeMode: 'contain',
  },
});

우리는 이미 예제에서 위에서 공유한 단계와 관련하여 필요한 모든 줄의 목적을 명령했습니다.

<Image style={styles.img} source={{ uri: 'https://www.delftstack.com/assets/img/logo.png', }} />

위의 코드 라인으로 이미지를 포함시킨 후 스타일 시트에 아래 속성을 설정합니다.

컨테이너의 경우:

속성 설명
flex: 1, 컨테이너를 flex로 정의합니다.
backgroundColor: '#fff', 배경색을 흰색 2개로 설정합니다.
alignItems: 'center', 가로 정렬을 가운데로 설정합니다.
justifyContent: 'center', 수직 정렬을 가운데로 설정합니다.

이미지의 경우:

속성 설명
width: 200, 이미지 너비를 200으로 설정합니다.
height: 200, 이미지 높이를 200으로 설정합니다.
resizeMode:'contain', 이미지를 자르지 마세요.

앱을 실행하면 화면에 아래 출력이 표시됩니다.

출력:

센터 이미지 리액트 네이티브

위에서 공유한 코드는 React-Native에서 생성됩니다. 우리는 Expo-CLI를 사용하여 앱을 실행했으며 최신 버전의 Node.js도 필요합니다.

환경에 Expo-CLI가 없으면 먼저 설치하십시오.

MD Aminul Islam avatar MD Aminul Islam avatar

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

LinkedIn

관련 문장 - React Native

관련 문장 - React Native Image