Posted at

FlatListとrender prop APIを使う

More than 1 year has passed since last update.

 初投稿です。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 propclass を合わせるとなぜか死ぬからです。

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