navigation.pop() 后 React Native FlatList 不显示图像

Question

发挥的主要技术：FlatList React-Navigation 5 Redux Redux-Thunk.

主页是 Post 的供稿（图片、标题、名称等）。主页的右上角是一个 Header 按钮，我按下它可以转到可以创建 Post 的屏幕。这是将图像、标题或两者添加到我的主页的地方。

下面是我的FlatList代码供参考。我已经尝试设置removeClippedSubviews={false}。这样做是行不通的，实际上会使问题变得更糟。

            <FlatList
                ref={flatListRef}
                data={allPosts} 
                extraData={[isLoading, isRefreshing, allPosts]}
                refreshControl={
                    <RefreshControl 
                        refreshing={isRefreshing}
                        onRefresh={onRefresh}
                    />
                }
                keyExtractor={item => item._id}
                initialNumToRender={2}
                renderItem={renderItem}

                onEndReached={!endOfFeed && !oneTimeLoad && handleLoadMore}
                onEndReachedThreshold={2}
                ListFooterComponent={renderFooter}
                ListHeaderComponent={renderHeader}
                removeClippedSubviews={true} // Best way to optimize but sacrifices fast scroll down with blank space
                //getItemLayout={(data, index) => ({ length: POST_CARD_HEIGHT, offset: POST_CARD_HEIGHT * index, index})}
                //windowSize={20}

                //maxToRenderPerBatch={15}
                //updateCellsBatchingPeriod={50}
            />

我的 Stack Navigator 在我按下 "Submit Post" 之前如图所示：HomeScreen => CreatePostScreen。在 CreatePostScreen 中按 "Submit" 会调度一个对我的后端服务器进行 API 调用的操作。创建 post 取回创建的 post 数据，包括图像 uri 和其他 metadata，然后通过将新创建的 post 添加到旧的来更新我的 redux 状态状态。

然后我打电话给 navigation.pop() 带我回到 HomeScreen。当我再次看到它时，我遇到了 Post，其中包含所有相关数据，除了显示 NO 图像。只有当我向下滚动到它看不见的地方然后再回到它时，我才能看到它。

任何见解都会有所帮助。

Answer 1

听起来简单的解决方案是使用不同的导航方法，例如 navigation.navigate('HomeScreen') 或 navigation.replace('HomeScreen')。您提到如果您向下滚动到 post 然后返回图像重新加载，这让我觉得使用不同的导航可能会成功。

Answer 2

这是一个与我的后端以及图像通常如何上传有关的问题。

因为有一个 AWSLambda 函数可以将上传的图像转换为不同的大小以提高效率，立即返回主页并尝试获取刚刚上传的图像导致图像加载失败，因为它不存在但采用调整后的格式。

Lambda 运行速度非常快，但状态更新速度更快。

navigation.pop() 后 React Native FlatList 不显示图像

React Native FlatList doesn't show image after navigation.pop()

react-native

react-native-flatlist