javascript: mi bucle de elementos de imagen no funciona como quiero en React Native

Tengo un objeto en otro archivo con ciertos atributos, como nombre, año, uri, etc... (lo importé y exporté por cierto)

Quería crear una función que repitiera todos estos objetos, lo que mostraría una imagen de un círculo rosa y el uri de cada objeto (uri almacena la imagen), para la cantidad de objetos que existen. Adjuntaré cómo quiero que se vea a continuación.

Aquí está la función:

const populateSeries = () => {
for (let i in seriesList) {
        <ImageBackground style={externalStyle.circle} source={require('../assets/circle.png')}>
        <Image style={externalStyle.image} source={seriesList[i].uri}/>
        </ImageBackground>
      } 
   }

Lo llamo a continuación así:

<ScrollView>
       <View>
         {populateSeries()}
       </View> 
</ScrollView> 

No muestra nada. No estoy seguro de cómo poner un bucle en el bit de visualización de mi código. ¿Alguien podría ayudar? Estoy seguro de que el bit uri funciona bien porque lo probé dentro de <View> y funcionó bien.

------------------------------------

Cree una matriz e inserte sus elementos en ella, ¡esto debería funcionar! :

//Top of your component
const populateSeries = [];
for (let i in seriesList) {
   populateSeries.push(<ImageBackground style={externalStyle.circle} source= 
   {require('../assets/circle.png')}>
    <Image style={externalStyle.image} source={seriesList[i].uri}/>
    </ImageBackground>);
  }

 //on return
<ScrollView>
   <View>
     {populateSeries}
   </View> 
</ScrollView> 

2

¡Muchas gracias! He estado rascándome la cabeza durante las últimas 2 horas. Esto lo solucionó.

Patty2904

28/03/2021 a las 17:31

Me alegra saberlo :)

-Muhammad Yousuf Noor

28/03/2021 a las 18:18

------------------------------------

Su función debería devolver componentes pero no veo que devuelva nada. Prueba esto:

<ScrollView>
       <View>
         {
            seriesList.map((seri) => {
               return (
                  <ImageBackground style={externalStyle.circle} source={require('../assets/circle.png')}>
                    <Image style={externalStyle.image} source={seri.uri}/>
                  </ImageBackground>
               )
            })
         }
       </View> 
</ScrollView> 

1

¡Gracias! La primera respuesta lo resolvió, pero si tengo problemas en el futuro, ¡lo tendré en cuenta!

Patty2904

28/03/2021 a las 17:33

------------------------------------

Su populateSeries no devuelve nada, por lo que su vista no muestra nada.

Intenta utilizar una lista plana si quieres representar el componente haciendo un bucle dentro de una matriz.

<ScrollView>
       <View>
         <FlatList
          data={seriesList}
          renderItem={({ item }) => (
            <ImageBackground style={externalStyle.circle} source=               {require('../assets/circle.png')}>
            <Image style={externalStyle.image} source={item.uri}/>
            </ImageBackground>
          )}
          keyExtractor={item => item.id}
        />
       </View> 
</ScrollView>

1

¡Gracias! La primera respuesta lo resolvió, pero si tengo problemas en el futuro, ¡lo tendré en cuenta!

Patty2904

28/03/2021 a las 17:32