Question

我正在用Expo开发一个React Native应用。在我的应用程序中，我通过网站的API在本地数据库（SQLite）中上传了一些图片。问题是我想像画廊一样显示这些图片，但我不能。我正在做这样的事情：

for (var x =0; x <= prod.length; x++) {
    require('../../web/image/'+prod[x].picture);
}

有人可以帮我吗？

Answer 1

在React和React Native中，组件使用其render函数进行渲染。

例如，在React Native中，native Image component用于渲染图像。

要渲染单个图像，您的组件应包括以下内容：

render() {
  return (
    <View>
      <Image
        source={require('/react-native/img/favicon.png')}
      />
    </View>
  );
}

在JSX内添加逻辑也很容易！只需将所有Javascript代码包装在花括号内即可，如下所示：

renderImages() {
    var images = [];
    for (var x=0; x <= prod.length; x++){
        images.push(<Image key={x} source={require('../../web/image/'+prod[x].picture)}/>);
    }
    return images;
}

render() {
  return (
    <View>
      { this.renderImages(); }
    </View>
  );
}

请注意，我向每个Image元素添加了一个key属性。呈现数组时，必须添加键。有关更多信息，请参见以下文档：https://reactjs.org/docs/lists-and-keys.html

在React Native中显示图片

1 个答案: