平面列表不渲染数据

Question

我对 React Native 还很陌生。我正在尝试使用平面列表，但是，即使显示正确的行数，列表项也不会显示。请检查图片

这基本上就是我提出的代码

import {View, Text, StyleSheet, FlatList} from 'react-native'
constructor(props){
    super(props)

    this.state = {
        listItem:[
            {key: 'Insert'},
            {key: 'View'},
            {key: 'Update'},
            {key: 'Delete'}
        ]
    }

}

render(){
        return(
            <View style={styles.container}>
                <View style={styles.header}>
                <Text style={styles.headerText}>Welcome Mr. {this.props.navigation.state.params.data
                ?this.props.navigation.state.params.data:"No data passed"}</Text>
                </View>
                <View style={styles.content}>
                    <FlatList
                    data ={this.state.listItem}
                    ItemSeparatorComponent = {this.FlatListItemSeparator}
                    renderItem = {(item)=>
                    <Text style={styles.item}
                    onPress={this.GetItem.bind(this, item.key)}>{item.key}</Text>}
                    />
                </View>

            </View>
        )
    }

我缺少什么？

Answer 1

renderItem功能道具让你返回的参数需要解构。这意味着它包含一个名为 item 的道具（以及另外两个：index 和 separators）并且它不是您选择调用 item.[=20 的通用参数=]

因此，为了解决您的问题，您只需更换

renderItem = {(item)=>...

和

renderItem = {({ item })=>....

关于FlatList及其renderItem道具的详细解释，请看官方RN doc.

平面列表不渲染数据

Flat list is not rendering data

react-native

react-native-flatlist