HOWTO · React Native
React Native의 동적 이미지
이 튜토리얼에서는 React Native에 동적 이미지를 포함하는 방법에 대해 설명합니다.
이 페이지의 내용
때때로 우리는 React Native 앱에 이미지를 동적으로 포함해야 합니다. 이러한 이미지는 조건부로 변경되거나 사용자가 버튼을 클릭하거나 작업을 수행할 때 변경됩니다.
require() 함수를 사용하여 이미지 경로를 전달하여 이미지 모듈을 동적으로 요구할 수 있습니다.
이 기사에서는 React Native 앱에 이미지를 동적으로 포함하는 방법을 배웁니다. 또한 필요한 예제와 설명을 제공하여 주제를 쉽게 만들 것입니다.
이를 위해 required()라는 함수를 사용합니다. 주제를 더 쉽게 만들기 위해 예제를 살펴보겠습니다.
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() {
let img = "./assets/image2.jpg"; // Declaring a variable that hold the image location
return (
<View style={styles.container}>
<Text>Simple Image</Text>
<Image style={styles.img} source={require(img)} />
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({ // Providing some styles to the UI
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
marginTop: 100,
},
img: {
width: '100%',
height: 120,
},
});
우리는 이미 각 줄의 목적을 명령했습니다. 위의 예제 코드에서 먼저 이미지 위치를 보유할 img라는 변수를 만들었습니다.
그런 다음 해당 변수를 특정 위치에서 이미지를 로드하는 require() 함수에 전달했습니다. 이제 위의 예제를 실행한 후 아래와 같은 출력을 얻을 수 있습니다.
출력:
위에서 공유한 예제 코드는 React Native에서 생성되었으며 Expo-CLI를 사용하여 앱을 실행했습니다.
