在 FlatList(native) 上呈现数据的错误 - React Native

Question

I've an application in react native that receive data from API and render to FlastList. However is happening a trouble like a image.

    <ScrollView>
 <FlatList
                data={MyAPIData}
                renderItem={({ item, index }) => (
                  <ContainerFlatList
                    style={{
                      backgroundColor: index % 2 === 0 ? '#F4F4F4' : '#ffff',
                    }}
                  >
                    <TextKey>
                      {item.data1}
                    </TextKey>
                    <TextFlatList>
</ ScrollView>

Someone has gone through this situation?

Answer 1

Some things that may help you.

1- Using ScrollView requires to wrap parent container into {flex: 1}

2- following the flatlist react-native's doc we see that you need to wrap it inside a SafeAreaView, not a ScrollView, here is a example from an App i've developed:

               <SafeAreaView style={styles.safeView}>
                    <FlatList
                        numColumns={2}
                        columnWrapperStyle={styles.list}
                        ItemSeparatorComponent={() => <Text></Text>}
                        data={this.state.arrEstab}
                        renderItem={({ item }) => <CardComponent style={styles.card} 
                        navigation= {this.props.navigation} nome={item.nome} imgUrl= 
                        {this.props.selectedType.url} estab={item} parent="porTipo"/>}
                        keyExtractor={item => item._id}
                    />    
                </SafeAreaView>

                ...,safeView: {
                    height: '80%',
                    width: '100%'
                },...

3- for avoiding errors, supply a keyExtractor if you dont have an ID, just pass the index of the item.