[React Native] 配列要素をループで表示する

5208 ワード
メモ reactnative メモ テキストリンク

概要

通常render()のreturn内ではfor文を書けないが、配列で管理されてるデータをText等で出力したい。

実装

Sample.tsx
export class Sample extends React.Component {
  render() {
    var alphabet = ["A", "B", "C", "D", "E"];

    return (
      <View>
        { 
          alphabet.map( data => { return (<Text key={data}>{data}</Text>) } ) 
        }
      </View>
    );
  }
}
  • {}で括っても、ifやforなどのロジックは呼び出せない。
  • 関数呼び出しは可能なので、mapを仕様してループ処理する。
  • ただし警告がでるので、keyを指定する。
  • keyは一意の値でなければならない。

終わりに

早い話が、mapを使おうなって話でした。
最初はreturnの前で予め表示用のデータを配列で作るという方法を考えていたのだが、普通にパフォーマンスが悪い。

export default class Sample extends Component {
  render() {
    var alphabet = ["A", "B", "C", "D", "E"];
    var Views: any[] = [];
    for (let i = 0; i < alphabet.length; i++) {
      Views.push(
        <View>{alphabet[i]}</View>
      );
    }

    return (
      <View>
        {Views}
      </View>
    );
  }
}
PHPでよく使われる配列処理方法の例分析