HOWTO · React Native
React Native에 이미지 포함
이 튜토리얼에서는 React Native에 이미지를 포함하는 방법에 대해 설명합니다.
이 페이지의 내용
앱을 디자인할 때 아이콘과 로고를 사용하여 작업해야 합니다.
이러한 이미지는 다른 형식일 수 있습니다. React-Native에서는 앱에 이미지를 포함하기가 쉽습니다.
이 기사에서는 React-Native 앱에서 이미지를 포함하고 크기를 조정하는 방법을 보여줍니다. 또한 주제를 쉽게 만들기 위해 필요한 예와 설명을 따라 주제에 대해 논의합니다.
React-Native 앱에 이미지를 포함하려면 다음 단계를 따르세요.
-
react-native패키지에서Image를 가져옵니다. -
return()내부에서 다음과 같이image태그를 구현합니다.<Image style={styles.YOUR_ID} source={{ uri: 'https://yourlink.com/yourImage.jpg', }} /> -
마지막으로 특정 ID를 사용하여 이미지의 스타일(크기)을 지정합니다.
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://st2.depositphotos.com/1031343/6062/v/450/depositphotos_60622807-stock-illustration-keep-it-simple-stamp.jpg',
}
}
/>
<StatusBar style="auto" / > <
/View>
);
}
const styles = StyleSheet.create({ / /
Providing style.container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
img: {
width: 100,
height: 100,
resizeMode: 'contain',
},
});
예제에서 위에서 공유한 단계와 관련하여 필요한 모든 줄의 목적은 주석으로 남습니다. 이제 앱을 실행하면 화면에 아래와 같은 출력이 표시됩니다.
위에서 공유한 코드는 React-Native에서 생성되었으며 Expo-CLI를 사용하여 앱을 실행했습니다.
