require()에는 단일 문자열 리터럴 인수가 있어야합니다. React Native

Question

직접 문자열 값 ("someImage.png")이 할당 된 경우 제대로 작동하는 응용 프로그램의 구성 요소가 있지만 이미지를 저장하여 할당하려고하면 지역 변수에 이름이이 예외를 제공합니다 "필요() 단일 문자열 리터럴 인수가 있어야합니다" 이 줄은 잘

<ImageBackground source={require("./Resources/bg/imageone.png")} resizeMode='cover' style={customStyles.backdrop}> 

문제가 나는 또한 같은 문제가 발견

let imageName = "./Resources/bg/imageone.png";   
<ImageBackground id="123" source={require(imageName)} resizeMode='cover' style={customStyles.backdrop}> 

이 경우에 발생 작동 보고 한 사람은 here이지만 아무도 답변하지 않았습니다. 저것은 아직 ered. 여기서 나를 도울 수 있니?

Answer 1

이 동적 이미지 예제는 변수에 이미지 원본 값을 올바르게 할당하는 방법을 보여줄 수도 있습니다. 변수의 값이 아닌 변수에 전체 require을 할당하는 것이 좋습니다.

https://facebook.github.io/react-native/docs/images.html

// 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} />; 

는

Answer 2

당신의 결과를 전달하는 2 개 이상 선택되어있는 경우이 솔루션을하는 데 도움이 희망이 필요한 내부 대신 (PARAM)을 필요로 할의 매개 변수로 방법.

render() { 
    return (
    <ScrollView> 
     {this.renderMenuItem("CATALOGO", require('../../img/hp_catalogo.jpg'), this.goToCatalogo)} 
     {this.renderMenuItem("NOVITÀ PRODOTTI", require('../../img/hp_novita.jpg'), this.goToNovita)} 
    </ScrollView>); 
} 

renderMenuItem(name, imagePath, func){ 
    return (
     <TouchableOpacity onPress={func} style={styles.box}> 
     <ImageBackground 
      source={imagePath} 
      style={styles.image}> 
      <Text>{name}</Text> 
     </ImageBackground> 
     <TouchableOpacity>); 
     }