HOWTO · React Native
React Native의 수직 정렬
이 튜토리얼에서는 React Native의 수직 정렬에 대해 설명합니다.
React Native는 Android 및 IOS 모두에서 앱을 개발하는 데 가장 많이 사용되는 프레임워크 중 하나입니다. React Native 앱에서 작업할 때 앱을 보다 사용자 친화적으로 만들기 위해 정렬이 매우 중요합니다.
React Native의 수직 정렬
모든 React Native 요소에 사용할 수 있는 정렬에는 가로 및 세로의 두 가지 종류가 있습니다. 수직 정렬에서는 flex-start, Center 및 flex-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 Native에서 생성되었으며 Expo-CLI를 사용하여 앱을 실행했습니다.
