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: '100%',
height: 200,
resizeMode: 'contain',
},
});
우리는 이미 예제에서 위에서 공유한 단계와 관련하여 필요한 모든 줄의 목적을 명령했습니다.
<Image style={styles.img} source={{ uri: 'https://www.delftstack.com/assets/img/logo.png', }} />
위의 코드 라인 이미지를 포함시킨 후 스타일 시트에 아래 속성을 설정합니다.
컨테이너
의 경우:
속성 | 정의 |
---|---|
플렉스: 1 |
컨테이너를 flex로 정의합니다. |
배경색: '#fff' |
배경색을 흰색 2개로 설정합니다. |
alignItems: '가운데' |
가로 정렬을 가운데로 설정합니다. |
justifyContent: '가운데' |
수직 정렬을 가운데로 설정합니다. |
이미지
의 경우:
속성 | 정의 |
---|---|
너비: '100%' |
이미지 너비를 100%로 설정합니다. |
높이: 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에서 요소 정렬