从本机中解析的对象数组渲染图像源 [英] Render images sources from parsed array of objects in react native

问题描述

我正在构建一个React Native应用程序，该应用程序假定使用一些元数据"对象作为源.我正在解析数组中的每个对象，并为每个item返回JSX布局.我唯一的问题是如何从图像中提供源，因为我已将它们存储在本地并且需要require("link").我的代码给我错误:

I'm building a react native application which suppose to use some 'meta-data' objects as sources. I'm parsing each object in array and returning a JSX layout for each item. The only problem I have is how to provide sources from images, since I have them stored locally and need to require("link") them. My code gives me error:

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"
  }

推荐答案

您可以执行以下操作

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

这篇关于从本机中解析的对象数组渲染图像源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！