\'알 수 없는 모듈 필요\' 오류 없이 React Native에서 어떻게 이미지를 동적으로 로드할 수 있나요?

React Native의 동적 이미지 요구 사항

React Native의 이미지 모듈로 작업할 때 동적 이름을 사용해야 할 때 이미지 이름이 참조되는 방식을 고려하는 것이 중요합니다.

표준 시나리오에서는 require() 함수에 정적 이미지 이름을 사용하면 문제 없이 작동합니다. 그러나 동적 이미지 이름을 활용하면 문제가 발생할 수 있습니다. 이 문제는 require('image!' 'avatar')를 사용하여 동적 이미지 이름에 문자열을 포함하려고 할 때 발생합니다. 이로 인해 답답한 '알 수 없는 모듈 필요' 오류가 발생할 수 있습니다.

React Native의 동적 이미지 이름 지원

안타깝게도 React Native 문서에 따르면 작업 시 제한이 있습니다. 동적 이미지 이름. "정적 리소스" 전용 섹션에서 설명서에는 "번들에서 이미지를 참조하는 데 허용되는 유일한 방법은 문자 그대로 소스에 require('image!name-of-the-asset')를 작성하는 것입니다. " 즉, 단순히 문자열을 이미지 이름과 연결하여 동적으로 만들 수는 없습니다.

동적 이미지 요구 사항 처리

이 제한 사항을 해결하려면 동적 이미지 이름을 할당해야 합니다. 변수에. 이를 달성하는 방법은 다음과 같습니다.

var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive');
<Image source={icon} />

또는 반응 네이티브 패키지의 자산() 도우미 기능을 활용하여 동적으로 이미지를 요구할 수 있습니다.

import { asset } from 'react-native';

const dynamicImageSource = asset('image!' + icon);

<Image source={dynamicImageSource} />

이 점을 기억하세요. 이 두 방법 모두 Xcode 내 앱의 xcassets 번들에 이미지를 추가해야 합니다.

작성자 이러한 지침을 준수하면 두려운 "알 수 없는 모듈 필요" 오류가 발생하지 않고 React Native 애플리케이션에서 동적 이미지 이름을 효과적으로 활용할 수 있습니다.

위 내용은 \'알 수 없는 모듈 필요\' 오류 없이 React Native에서 어떻게 이미지를 동적으로 로드할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!