如何在 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 而不是 typescript，则不需要这些类型）

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

你的长笛演奏者应该更新了。