如何在 React Native 中使用 onPress 刷新页面

Question

我是 ReactNative 的新手，遇到了有关页面刷新的问题。我的屏幕上有一些过滤器，并且希望在按下这些过滤器中的任何一个后刷新页面，但我找不到任何关于如何操作的指南。我无休止地搜索，但只找到了很多关于下拉刷新的指南，我觉得解决方案与 React.useEffect 有关，但我对此不熟悉。

我的代码的重要部分如下：

触发刷新的TouchableOpacity组件：

                        <TouchableOpacity
                            style={styles.filterButton}
                            onPress={() => {
                                sortByRating()
                            }}
                        >

其中 sortByRating() 是根据评分对我的 eateriesToShow 数组进行排序的函数。

我想在过滤器上刷新的 FlatList：

                <FlatList
                    data={eateriesToShow}
                    keyExtractor={item => item.id.toString()}
                    renderItem={renderItem}
                    showsVerticalScrollIndicator={true}
                />
            </View>
        )
    }

目前我的 eateriesToShow 数组已排序，但 FlatList 未刷新。任何帮助将不胜感激。

Answer 1

您希望您的扁平化工具在数据更改时更新。让你的长笛演奏者焕然一新是另一回事。所以我建议你做的是使用 useState 钩子。

 const [yourList, setYourList] = useState<string | null>(null)

像这样（如果您使用 javascript 而不是打字稿，则不需要类型）

然后在按评分排序时，您应该执行 setYourList(newEateriesArray)

你的长笛手应该更新了。