可刷新修饰符
将可滚动视图标记为 可刷新，允许用户下拉以触发异步的数据刷新操作。
类型
1refreshable?: () => Promise<void>
概述
在如 <List> 这样的可滚动视图上使用 refreshable 修饰符，可以启用下拉刷新的交互行为。当用户在页面顶部下拉时，框架会调用你提供的异步处理函数。
在处理函数中，你可以执行异步操作（例如请求网络数据或更新本地状态），当该函数返回后，刷新指示器将自动隐藏。
此行为与 SwiftUI 的 refreshable 非常相似。
使用示例
1<List
2 navigationTitle="可刷新列表"
3 navigationBarTitleDisplayMode="inline"
4 refreshable={refresh}
5/>
完整示例
1function Example() {
2 const [data, setData] = useState(generateRandomList)
3
4 function generateRandomList() {
5 const data: number[] = []
6 const count = Math.ceil(Math.random() * 100 + 10)
7
8 for (let i = 0; i < count; i++) {
9 const num = Math.ceil(Math.random() * 1000)
10 data.push(num)
11 }
12
13 return data
14 }
15
16 async function refresh() {
17 return new Promise<void>(resolve => {
18 setTimeout(() => {
19 setData(generateRandomList())
20 resolve()
21 }, 2000) // 模拟2秒刷新
22 })
23 }
24
25 return <NavigationStack>
26 <List
27 navigationTitle="可刷新列表"
28 navigationBarTitleDisplayMode="inline"
29 refreshable={refresh}
30 >
31 <Section header={<Text textCase={null}>下拉即可刷新</Text>}>
32 {data.map(item =>
33 <Text>数字：{item}</Text>
34 )}
35 </Section>
36 </List>
37 </NavigationStack>
38}
行为说明
-
refreshable 必须返回一个 Promise<void>。只有在该 promise 被解析（resolve）后，刷新指示器才会消失。
-
在处理函数内部可以使用 await 进行异步操作：
1refreshable={async () => {
2 const result = await fetchData()
3 setData(result)
4}}
-
此修饰符 仅适用于可滚动容器（如 <List>）。
-
在刷新逻辑中应更新相关状态，以反映新的数据。
-
避免长时间运行或无反馈的任务，必须确保 promise 能被及时解析以防止界面卡住。
使用建议
-
保持刷新逻辑简洁高效。
-
始终在逻辑结束后调用 resolve。
-
开发时可使用延迟模拟加载动画：
1await new Promise(resolve => setTimeout(resolve, 1000))
