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
가 없으면 먼저 설치하십시오.
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에서 이미지 너비를 백분율로 설정