如何在ReactNative中使用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

您希望您的 Flatist 在数据更改时进行更新。让你的长笛手焕然一新是另一回事。所以我建议你使用 useState 钩子。

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

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

然后当按评级排序时，你应该执行 setYourList(newEateriesArray)

你的长笛手应该更新。

Answer 2

如果是博览会应用程序，请使用以下代码 首先安装依赖项并导入它，

expo 安装 expo-updates

import * as Update from expo-updates;
const onpress =async()=>{
await Update.reloadAsync();
}