React Native の for ループ

MD Aminul Islam 2023年10月12日
React Native の for ループ

ループは、あらゆるプログラミング言語およびフレームワークで最もよく使用される一般的な部分です。 一度に複数の要素を動的に作成する必要がある場合があります。

この目的のためにループを使用します。 しかし、React-Native では、他のプログラミング言語よりも少し難しくなります。

この記事では、React-Native での for ループの使用について説明します。

React Native で for ループを使用する

React アプリで for ループを使用するには、以下の手順に従う必要があります。

  1. まず、配列オブジェクトを作成する必要があります。
  2. 次に、for ループを実行し、作成した配列内に要素をプッシュする必要があります。
  3. その配列を return() 関数に渡す必要があります。

以下の例を見てみましょう。ここでは、React-Native での for ループの使用を示しています。

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

手順に関するすべての必要な行の目的は、上記のコードにコメントとして残されています。 アプリを実行すると、画面に以下の出力が表示されます。

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

上記で共有されているコードは React-Native で作成されており、Expo-CLI を使用してアプリを実行していることに注意してください。

著者: MD Aminul Islam
MD Aminul Islam avatar MD Aminul Islam avatar

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

LinkedIn

関連記事 - React Native

関連記事 - React Native Loop