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
를 사용하여 앱을 실행했습니다.
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
- Native View onPress 반응
- React Native에 이미지 포함
- React Native에서 라이브러리 연결 해제
- React Native에서 앱 이름 변경
- React Native에서 요소 정렬
- React Native에서 이미지 너비를 백분율로 설정