Рендеринг источников изображений из разбора массива объектов в ответном нативном

Question

Я создаю реактивное родное приложение, которое предполагает использование некоторых объектов метаданных в качестве источников. Я разбираю каждый объект в массиве и возвращаю JSX-макет для каждого item. Единственная проблема, с которой я сталкиваюсь, - это предоставить источники из изображений, так как я их храню локально и нуждаюсь в них: require("link"). Мой код дает мне ошибку:

function loadModuleImplementation(moduleId, module) { 
    moduleId = "../../../images/icons/photographer/Party.png" 

Моему код:

class SelectScreen extends Component { 
    props:Props; 


    Details = [ 
     { 
      "type": "Party", 
      "image": "../../../images/icons/photographer/Party.png" 
     }, 
     { 
      "type": "Wedding", 
      "image": "../../../images/icons/photographer/Wedding.png" 
     }, 
     { 
      "type": "Architecture", 
      "image": "../../../images/icons/photographer/Arhitecture.png" 
     }, 
     { 
      "type": "Christening", 
      "image": "../../../images/icons/photographer/Christening.png" 
     } 
    ]; 

    render() { 
    let renderPhotoTypes =() => { 
     let type = []; 

     this.Details.map((item)=> { 
     type.push(
      <View style={styles.imageSelectItem} key={item.type}> 
      <TouchableWithoutFeedback> 
       <View> 
       <View style={styles.imageContainer}> 
        <Image style={styles.image} source={require(item.image)}/> 
       </View> 
       <Text style={styles.text}>{item.type}</Text> 
       </View> 
      </TouchableWithoutFeedback> 
      </View> 
     ); 
     }); 

     return type; 
    }; 

    return (
     <ScrollView style={styleGuide.containerMain}> 
     <Text style={styleGuide.heading_1}> 
      Select type 
     </Text> 

     <View style={styles.imageSelectContainer}> 
      {renderPhotoTypes()} 
     </View> 
     </ScrollView>); 
    } 
} 

Версия:

"dependencies": { 
    "axios": "^0.12.0", 
    "babel-relay-plugin": "^0.9.0", 
    "buffer": "^4.6.0", 
    "color": "^0.11.1", 
    "invariant": "^2.2.1", 
    "react": "~15.0.2", 
    "react-native": "^0.26.1", 
    "react-native-button": "^1.6.0", 
    "react-native-drawer": "^2.2.3", 
    "react-native-fbsdk": "^0.2.1", 
    "react-native-message-bar": "^1.6.0", 
    "react-native-radio-buttons": "^0.11.0", 
    "react-native-vector-icons": "^2.0.3", 
    "react-redux": "^4.4.5", 
    "react-relay": "^0.9.0", 
    "redux": "^3.5.2", 
    "redux-logger": "^2.6.1", 
    "redux-persist": "^3.2.2", 
    "redux-thunk": "^2.1.0" 
    } 

Answer 1

Вы можете сделать что-то вроде этого

Details = [ 
     { 
      type: "Party", 
      image: require("../../../images/icons/photographer/Party.png") 
     }, 
     { 
      type: "Wedding", 
      image: require("../../../images/icons/photographer/Wedding.png") 
     }, 
     { 
      type: "Architecture", 
      image: require("../../../images/icons/photographer/Arhitecture.png") 
     }, 
     { 
      type: "Christening", 
      image: require("../../../images/icons/photographer/Christening.png") 
     } 
    ]; 

    render() { 
    let renderPhotoTypes =() => { 
     let type = []; 

     this.Details.map((item)=> { 
     type.push(
      <View style={styles.imageSelectItem} key={item.type}> 
      <TouchableWithoutFeedback> 
       <View> 
       <View style={styles.imageContainer}> 
        <Image style={styles.image} source={item.image}/> 
       </View> 
       <Text style={styles.text}>{item.type}</Text> 
       </View> 
      </TouchableWithoutFeedback> 
      </View> 
     ); 
     }); 

     return type; 
    };