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

概要

通常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>
    );
  }
}