React Native의 수직 정렬

MD Aminul Islam 2024년2월15일
  1. React Native의 수직 정렬
  2. React Native에서 요소를 세로로 정렬한 예
React Native의 수직 정렬

React Native는 Android 및 IOS 모두에서 앱을 개발하는 데 가장 많이 사용되는 프레임워크 중 하나입니다. React Native 앱에서 작업할 때 앱을 보다 사용자 친화적으로 만들기 위해 정렬이 매우 중요합니다.

React Native의 수직 정렬

모든 React Native 요소에 사용할 수 있는 정렬에는 가로 및 세로의 두 가지 종류가 있습니다. 수직 정렬에서는 flex-start, Centerflex-end의 세 가지 속성을 사용할 수 있습니다.

이 기사에서는 React Native 요소를 수직으로 정렬하는 방법을 알려줍니다. 또한 필요한 예제와 설명을 제공하여 주제를 쉽게 만들 것입니다.

React Native 요소를 정렬하려면 style을 다음과 같이 변경하기만 하면 됩니다.

React_Element_ID :{
    justifyContent: 'center', // For aligning vertically
    flex:1
}

더 명확하게 하기 위해 예를 들어 보겠습니다.

React Native에서 요소를 세로로 정렬한 예

아래 예에서는 React Native 앱에서 이미지를 세로로 정렬하는 방법을 설명했습니다. 다음 코드를 살펴보겠습니다.

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

// Our main function
export default function App() {

  return ( // Creating the UI elements.
    <View style={styles.container}>
      <Text>Simple Image</Text>
      <Image
        style={styles.img}
        source={{
          uri: 'https://st2.depositphotos.com/1031343/6062/v/450/depositphotos_60622807-stock-illustration-keep-it-simple-stamp.jpg',
        }}
      />
      <StatusBar style="auto" />
    </View>
  );
}

// Providing all necessary styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'flex-start',
    marginTop: 100,
  },
  img: {
    width: 100,
    height: 100,
  },
});

우리는 이미 예제에서 위에서 공유한 단계와 관련하여 필요한 모든 줄의 목적을 명령했습니다. 앱을 실행하면 화면에 아래와 같은 출력이 표시됩니다.

출력:

React 기본 수직 정렬 - 출력

위에서 공유한 예제 코드는 React Native에서 생성되었으며 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 Alignment