React Nativeで要素をloopして表示する

ysugiyama12 14views 更新:2017年7月12日

Viewタグなどで囲まれた要素に配列の値などを代入しながら複数回表示する時の方法

export default class Sample extends Component {
  render() {
    var label = ["A", "B", "C", "D", "E"];
    var Cards = [];
    for (let i = 0; i < label.length; i++) {
      Cards.push(
        <TouchableOpacity
          key={i}
        >
          <Card>
            <Text>
              {label[i]}
            </Text>
          </Card>
        </TouchableOpacity>
      );
    }

    return (
      <View>
        <ScrollView horizontal>
          {Cards}
        </ScrollView>
      </View>
    );
  }
}

変数Cardsに配列の要素数だけタグを追加して、return部分で{Cards}とすることでその部分にすべての要素を出力してくれる。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません