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
を使用してアプリを実行していることに注意してください。
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 Box Shadow
- React Native setTimeout メソッド
- React Native View onPress
- React Native でグローバル変数を使用する
- React Native でのストレージ
- React Native でのテキスト ラップ