HOWTO · React Native
React Native の for ループ
このチュートリアルでは、React Native の for ループについて説明します。
このページの内容
ループは、あらゆるプログラミング言語およびフレームワークで最もよく使用される一般的な部分です。 一度に複数の要素を動的に作成する必要がある場合があります。
この目的のためにループを使用します。 しかし、React-Native では、他のプログラミング言語よりも少し難しくなります。
この記事では、React-Native での for ループの使用について説明します。
React Native で for ループを使用する
React アプリで for ループを使用するには、以下の手順に従う必要があります。
- まず、配列オブジェクトを作成する必要があります。
- 次に、
forループを実行し、作成した配列内に要素をプッシュする必要があります。 - その配列を
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 を使用してアプリを実行していることに注意してください。
