\'알 수 없는 모듈 필요\' 오류를 피하면서 React Native에서 이미지를 동적으로 로드하려면 어떻게 해야 합니까?

React Native의 동적 이미지 이름 - 이미지 요구 모듈

React Native에서 Image 구성 요소에는 개발자가 쉽게 로드할 수 있는 직관적인 요구 모듈이 미리 포함되어 있습니다. 이미지. 정적 이미지의 경우, require('image!avatar')를 사용하는 것만큼 간단하게 액세스할 수 있습니다. 그러나 문자열 보간 방법 require('image!' 'avatar')를 사용하여 이미지를 동적으로 로드하려고 하면 "알 수 없는 모듈이 필요합니다"라는 오류가 발생합니다.

이 동작은 React에 문서화된 대로 의도적으로 설계된 것입니다. 네이티브의 정적 리소스 섹션. 리터럴 파일 이름으로 이미지를 명시적으로 요구하면 코드베이스의 안정성과 명확성이 보장됩니다. 동적 문자열 보간을 사용하려고 시도하면 모호함과 잠재적인 문제가 발생합니다.

동적 이미지 참조 모범 사례

동적으로 이미지를 참조하는 것이 권장되지 않더라도 상황이 발생할 수 있습니다. 필요하다. 이러한 시나리오를 수용하기 위해 React Native는 다음 모범 사례를 권장합니다.

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

필요한 이미지가 포함된 변수에 아이콘을 명시적으로 할당함으로써 코드는 정적 자산에 대한 명확하고 일관된 참조를 보장합니다.

Xcode 이미지 자산 포함

정적 이미지 자산을 Xcode xcassets 번들이 React Native에서 올바르게 인식됩니다. 런타임 문제를 방지하려면 이러한 이미지가 고려되었는지 확인하세요.

참조:

• [React Native Image Module 문서](http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets)

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