Clash Royale CLAN TAG#URR8PPP

Display picture in React Native

I'm making a React Native app with Expo. In my app, I upload some pictures via the API of my website, in a local database (SQLite).
The problem is that I want to display these pictures like a gallery but I can't. I'm doing something like this:

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



Can someone help me?

1 Answer
1

In React and React Native, a component renders using its render function.

render

For instance, in React Native the native Image component is used for rendering images.

To render a single image, your component should include something like this:

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



Adding logic inside of your JSX is easy too! Simply wrap any Javascript code inside of curly braces as follows:

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



Note that I added a key property to each Image element. When rendering arrays, you must add keys. See the following document for more information: https://reactjs.org/docs/lists-and-keys.html

key

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.