는, 네이티브 코드 아래 이미지 소스

Question

작동하지 필요 반응 네이티브 반응

 
Requiring unknown module "../../images/Foo.png".If you are sure the module is there, try restarting the packager or running "npm install". 

을 불평하지만 require 호출 이미지 소스 경로를 하드 경우 동일한 코드는 잘 작동합니다.

코드가 작동하지 않습니다. : 아이콘 이름을 결정하는 메소드 호출이 있습니다. require('../../images/'+imageIconNameFor(prediction.type) 행을 확인하십시오.

const PredictionItem = ({prediction}) => (
<TouchableHighlight onPress={() => itemPressed()}> 
    <View style={styles.predictionItem}> 
     <Image style={styles.predictionIcon} source={require('../../images/'+imageIconNameFor(prediction.type))}></Image> 
    </View> 
</TouchableHighlight> 
); 
function imageIconNameFor(predictionType) { 
    return "Foo.png"; 
} 

코드 작업 : 대신 내가 require 전화의 아이콘 이름을 하드 코딩하는 경우, 아이콘의 이름을 결정하는 메소드를 호출, 그것을 잘 작동합니다. require('../../images/Foo.png') 행을 확인하십시오.

const PredictionItem = ({prediction}) => (
<TouchableHighlight onPress={() => itemPressed()}> 
    <View style={styles.predictionItem}> 
     <Image style={styles.predictionIcon} source={require('../../images/Foo.png')}></Image> 
    </View> 
</TouchableHighlight> 
); 
function imageIconNameFor(predictionType) { 
    return "Foo.png"; 
} 

이미지 원본을 빌드하기 위해 문자열을 연결할 때 다른 동작이 나타나는 이유는 무엇입니까?
require('../../images/'+imageIconNameFor(prediction.type) 이미지를 렌더링하는 데 실패하지만 require('../../images/Foo.png')이 정상적으로 작동하는 이유는 무엇입니까?

메서드 호출이 문제가되지 않았습니다. 오류 메시지에는 메서드 호출을 사용하여 계산 된 이미지의 전체 경로가 포함됩니다. 완전한 경로에도 불구하고, 네이티브는 모듈 누락에 대해 불만을 토로했다.
실제 기본 버전은 0.37.0입니다. 나는 ios-simulator에서 이것을 테스트했다.

Answer 1

불행하게도 반응 형 네이티브 패키지가 작동하는 방식이므로 필요에 따라 이미지 이름을 정적으로 알아야합니다. 다음은 공식 docs의 예입니다.

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

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

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