FlatListとrender prop APIを使う #JavaScript

　初投稿です。Vue Native で FlatList を使いたいのだけど、普通に書くと JSX が出てきて破滅しがちなので何とかしたい、何とかするのが render prop API です。

普通に書いたコードです。

<template>
  <flat-list
    :ListHeaderComponent="ListHeaderComponent"
    :data="items"
    :key-extractor="(item, index) => item"
    :render-item="renderItem"
  />
</template>

<script>
import React from 'react'
import { Text, View, StyleSheet } from 'react-native'

export default {
  data () {
    return {
      items: ['Debbie', 'Lou', 'Daphne', 'Amita', 'Tammy', 'Constance', 'Leslie', 'Rose'],

      ListHeaderComponent: (
        <View style={styles.listItem}>
          <Text>💎✨</Text>
        </View>
      ),
    }
  },
  methods: {
    renderItem ({ item, index }) {
      return (
        <View style={styles.listItem}>
          <Text>{item}</Text>
        </View>
      )
    },
  },
}

const styles = StyleSheet.create({
  listItem: {
    padding: 20,
  },
})
</script>

render prop API を使って書いたコードです。

<template>
  <flat-list
    :data="items"
    :key-extractor="(item, index) => item"
  >
    <!-- コンポーネントを指定するときは `render-prop` -->
    <view :style="styles.listItem" render-prop="ListHeaderComponent">
      <text>💎✨</text>
    </view>

    <!-- コールバックを指定するときは `render-prop-fn` -->
    <view :style="styles.listItem" render-prop-fn="renderItem">
      <!-- `args` に引数が入る -->
      <text>{{ args.item }}</text>
    </view>
  </flat-list>
</template>

<script>
export default {
  data () {
    return {
      items: ['Debbie', 'Lou', 'Daphne', 'Amita', 'Tammy', 'Constance', 'Leslie', 'Rose'],

      styles: {
        listItem: {
          padding: 20,
        },
      },
    }
  },
}
</script>

JSX が消えたことで治安が良くなってきました。スタイルの指定に CSS を使っていないのは、render prop に class を合わせるとなぜか死ぬからです。

楽しい！₍₍ (ง╹◡╹)ว ⁾⁾