React Native에서 동적으로 이름이 지정된 이미지를 표시하는 방법은 무엇입니까?

React Native의 동적 이미지 이름: Image Require 모듈 사용

React Native로 작업할 때 Image 모듈을 사용하면 이미지를 표시할 수 있습니다. 귀하의 응용 프로그램에서. 일반적으로 이미지는 require('image!name-of-the-asset') 구문을 사용하여 정적으로 참조할 수 있습니다.

그러나 동적 이미지 이름을 사용하려고 하면 일반적인 질문이 발생합니다. 예를 들어 'avatar'와 같이 이미지 이름을 나타내는 동적 문자열이 있는 경우 다음 코드는 작동하지 않습니다.

<Image source={require('image!' + 'avatar')} />

이렇게 하면 "알 수 없는 모듈이 필요합니다"라는 오류가 발생합니다.image!avatar "".

설명

React Native 문서에 따르면 정적 리소스는 앞에서 언급한 정적 구문을 사용하여 직접 참조할 수 있습니다. 이미지를 동적으로 로드하는 것은 지원되지 않습니다.

// Correct:
<Image source={require('image!my-icon')} />

// Incorrect:
var icon = 'my-icon-active';
<Image source={require('image!' + icon)} />

대체 솔루션

동적 이미지 이름을 사용해야 하는 경우 이미지 자산을 별도의 배열에 저장하거나 그런 다음 이미지 구성 요소의 소스 소품을 사용하여 참조합니다.

const images = {
  avatar: require('image!avatar'),
  logo: require('image!logo'),
};

<Image source={images[dynamicImageName]} />

추가 참고

iOS의 경우 Xcode 프로젝트 내의 자산 카탈로그에 이미지를 포함해야 합니다. 이는 React Native 애플리케이션에서 이미지를 올바르게 참조하는 데 필요합니다.

위 내용은 React Native에서 동적으로 이름이 지정된 이미지를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!