For-Schleife in React Native

Schleifen sind der am häufigsten verwendete und häufigste Teil jeder Programmiersprache und jedes Frameworks. Manchmal müssen wir mehrere Elemente gleichzeitig dynamisch erstellen.

Zu diesem Zweck verwenden wir Schleifen. Aber in React-Native ist es etwas schwieriger als in anderen Programmiersprachen.

Dieser Artikel zeigt die Verwendung einer for-Schleife in React-Native.

Verwenden Sie die for-Schleife in React Native

Um die for-Schleife in einer React-App zu verwenden, müssen wir die folgenden Schritte ausführen.

1. Zuerst müssen wir ein Array-Objekt erstellen.
2. Dann müssen wir die for-Schleife ausführen und Elemente in das von uns erstellte Array verschieben.
3. Wir müssen dieses Array an die Funktion return() übergeben.

Schauen wir uns unser Beispiel unten an, in dem wir die Verwendung der for-Schleife in React-Native veranschaulicht haben.

// 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',
  },
});

Der Zweck aller notwendigen Zeilen bezüglich der Schritte wird als Kommentar im obigen Code hinterlassen. Wenn Sie jetzt die App ausführen, erhalten Sie die folgende Ausgabe auf Ihrem Bildschirm.

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

Bitte beachten Sie, dass der oben geteilte Code in React-Native erstellt wird und wir die Expo-CLI verwendet haben, um die App auszuführen.