React Native의 동적 이미지

MD Aminul Islam 2023년6월21일
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 Dynamic Image - 출력

위에서 공유한 예제 코드는 React Native에서 생성되었으며 Expo-CLI를 사용하여 앱을 실행했습니다.

MD Aminul Islam avatar MD Aminul Islam avatar

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

관련 문장 - React Native Image