Плоский список не отображает данные - PullRequest
Новая
       13

Плоский список не отображает данные

1 голос
/ 25 марта 2020

Я довольно новичок в React native. Я пытаюсь использовать плоский список, однако элементы списка не отображаются, даже если он показывает правильный ряд строк. Пожалуйста, проверьте изображение List with empty rows

Это в основном код, который я выдвинул 

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>
        )
    }

Чего мне не хватает?

1 Ответ

2 голосов
/ 26 марта 2020

Параметр, который функциональная опора renderItem возвращает вас назад, нуждается в деструктурировании. Это означает, что он содержит реквизит с именем item (и два других: index и separators), и это не универсальный параметр c, который ВЫ выбрали для вызова item.

Итак, чтобы решить вашу проблему, вы можете просто заменить

renderItem = {(item)=>...

на

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

Для подробного объяснения FlatList и его renderItem опора, пожалуйста, посмотрите официальный RN do c.

...