React Native의 Image Require 모듈에서 어떻게 이미지를 동적으로 로드할 수 있나요?

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

React Native에서 Image Require 모듈을 사용하면 개발자가 정적 이미지 리소스를 자신의 프로젝트에 로드할 수 있습니다. 응용 프로그램. 모듈은 정적 이미지 파일 이름과 완벽하게 작동하지만 동적 이미지 이름은 오류로 이어지는 경우가 많습니다.

문제:

개발자가 이미지 파일 이름에 동적 문자열을 사용하려고 합니다. :

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

그러나 React Native는 그림과 같이 알 수 없는 모듈을 나타내는 오류를 발생시킵니다. 아래:

Requiring unknown module "image!avatar". If you are sure the module is there, try restarting the packager.

해결 방법:

React Native 문서의 "정적 리소스" 섹션에 따르면 이미지 이름은 소스 속성에 정적으로 지정되어야 합니다.

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

이미지 파일 이름에 동적 문자열을 사용하는 것은 명시적으로 권장 사항:

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

대신 조건부 렌더링을 활용하여 정적 이미지 파일 이름을 변수에 할당하는 것이 해결책입니다.

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

추가 고려 사항:

• 정적 이미지 리소스는 Xcode의 xcassets 번들에 추가되어야 합니다.
• React Native 앱에 정적 리소스를 추가하는 방법에 대한 자세한 내용은 http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your에서 확인할 수 있습니다. -app-using-images-xcassets.

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