동적 네이티브 네이티브 이미지가 필요합니다.

Question

저는 반응하는 네이티브 프로젝트의 국가를 나타내는 플래그를 포함하고 있습니다. 나는 네이티브 네이티브에서 아래 예제와 같은 이미지를 동적으로 요구할 수 없다는 것을 발견했습니다.

require(`../assets/flags/32/${countryCode}.png`) 

그래서 내가 올바른 플래그 코드를 통과 할 때 다시 필요한 이미지를 반환 스위치 문으로 함수를 만드는 생각 here을 발견 SO 응답을 제공. 아래와 같은 것.

export const Flags = (countryCode) => { 
switch (countryCode) { 
    case 'US': 
    return require('../assets/flags/32/US.png'); 
    .... 
} 
}; 

이 솔루션을 사용하면 200 가지가 넘는 케이스가 있습니다. 이것을 할 수있는 더 좋은 방법이 있습니까?

Answer 1

수동으로 모든 이미지를 필요로하는 것이 얼마나 번거롭기 때문에 them to your App image assets을 추가하고 uri을 통해 필요합니까? 그 외에는

<Image source={{uri: 'flags/32/'+countryCode}} style={{width: 32, height: 32}} /> 

나는 당신의 제안이 유일한 해결책이라고 생각 .. 당신은 그것을 JS 모듈함으로써 약간을 정리할 수 있습니다.

Flags.js

exports.US = require('../assets/flags/32/US.png') 
exports.UK = require('../assets/flags/32/UK.png') 
exports.FR = require('../assets/flags/32/FR.png') 
exports.JP = require('../assets/flags/32/JP.png') 
... 

은 그럼 그냥 그렇게처럼 참조.

Component.js

import Flags from './Flags' 

<Image source={Flags[countryCode]} style={{width: 32, height: 32}} />