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
를 사용하여 앱을 실행했습니다.
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에서 이미지 너비를 백분율로 설정