For Loop en React Native

Los bucles son la parte más utilizada y común de cualquier marco y lenguaje de programación. A veces necesitamos crear varios elementos a la vez de forma dinámica.

Usamos bucles para este propósito. Pero en React-Native, es un poco más difícil que en otros lenguajes de programación.

Este artículo mostrará el uso de un bucle for en React-Native.

Use el bucle for en React Native

Para usar el ciclo for en una aplicación React, debemos seguir los pasos a continuación.

1. Primero, necesitamos crear un objeto de matriz.
2. Luego, necesitamos ejecutar el bucle for y empujar elementos dentro de la matriz que creamos.
3. Debemos pasar ese array a la función return().

Echemos un vistazo a nuestro ejemplo a continuación, donde ilustramos el uso del bucle for en React-Native.

// importing necessary packages

import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  let myLoop = [];  // Declaring an array

  for (let a = 0; a <= 5; a++) {  // For loop here
     myLoop.push(
       <Text>This is line {a} {'\n'}</Text>
     );
  }


  return ( // Showing the array element
    <View style={styles.container}>
      <Text>{myLoop}</Text>
      <StatusBar style="auto" />
    </View>
  );

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

El propósito de todas las líneas necesarias con respecto a los pasos se deja como comentarios en el código anterior. Ahora, cuando ejecute la aplicación, obtendrá el siguiente resultado en su pantalla.

This is line 0
This is line 1
This is line 2
This is line 3
This is line 4
This is line 5

Tenga en cuenta que el código compartido anteriormente se crea en React-Native, y usamos Expo-CLI para ejecutar la aplicación.