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

Question

我有一个 React Native 应用程序，它从 API 接收数据并呈现到 FlastList。 然而正在发生一个像图像一样的麻烦。

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

有人经历过这种情况吗？

Answer 1

一些可能对您有所帮助的事情。

1- 使用 ScrollView 需要将父容器包装到 {flex: 1}

2- 在flatlist react-native's doc 之后，我们看到您需要将其包装在 SafeAreaView 中，而不是 ScrollView 中，这是我开发的 App 的示例：

               <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- 为避免错误，如果您没有 ID，请提供 keyExtractor，只需传递项目的索引即可。