feat: 添加任务刷新功能至任务上下文,并在任务列表屏幕中实现下拉刷新

This commit is contained in:
xudan 2025-07-23 16:59:46 +08:00
parent e4a7218f81
commit ece6728e94
2 changed files with 42 additions and 8 deletions

View File

@ -23,6 +23,7 @@ interface TasksContextData {
refreshConfig: () => Promise<void>;
isConfigLoaded: boolean;
fetchTaskDetail: (taskId: string) => Promise<void>;
refreshTasks: () => Promise<void>;
}
const TasksContext = createContext<TasksContextData>({} as TasksContextData);
@ -34,7 +35,7 @@ export const TasksProvider: React.FC<{ children: ReactNode }> = ({
const [isConfigLoaded, setIsConfigLoaded] = useState(false);
const [serverUrl, setServerUrl] = useState<string | null>(null);
const fetchTasks = useCallback(async () => {
const refreshTasks = useCallback(async () => {
if (!isConfigLoaded) return;
try {
const fetchedTasks = await getTasksService({ pageNum: 1, pageSize: 100 });
@ -67,9 +68,9 @@ export const TasksProvider: React.FC<{ children: ReactNode }> = ({
useEffect(() => {
if (isConfigLoaded) {
fetchTasks();
refreshTasks();
}
}, [isConfigLoaded, fetchTasks]);
}, [isConfigLoaded, refreshTasks]);
const applyConfig = (config: AppConfig) => {
if (config.serverUrl) {
@ -129,6 +130,7 @@ export const TasksProvider: React.FC<{ children: ReactNode }> = ({
refreshConfig,
isConfigLoaded,
fetchTaskDetail,
refreshTasks,
}),
[
tasks,
@ -138,6 +140,7 @@ export const TasksProvider: React.FC<{ children: ReactNode }> = ({
refreshConfig,
isConfigLoaded,
fetchTaskDetail,
refreshTasks,
],
);

View File

@ -1,7 +1,14 @@
import React from 'react';
import { View, StyleSheet, FlatList } from 'react-native';
import React, { useLayoutEffect, useState, useCallback } from 'react';
import {
View,
StyleSheet,
FlatList,
TouchableOpacity,
ActivityIndicator,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { useTasks } from '../context/TasksContext';
import TaskCard from '../components/TaskCard';
@ -16,10 +23,34 @@ type TaskListNavigationProp = StackNavigationProp<
>;
export default function TaskListScreen() {
const { tasks } = useTasks();
console.log('tasks', tasks);
const { tasks, refreshTasks } = useTasks();
const navigation = useNavigation<TaskListNavigationProp>();
const [isRefreshing, setIsRefreshing] = useState(false);
const handleRefresh = useCallback(async () => {
setIsRefreshing(true);
try {
await refreshTasks();
} catch (error) {
console.error('刷新任务失败:', error);
} finally {
setIsRefreshing(false);
}
}, [refreshTasks]);
useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (
<TouchableOpacity onPress={handleRefresh} style={{ marginRight: 15 }}>
{isRefreshing ? (
<ActivityIndicator size="small" color="#ffffff" />
) : (
<MaterialIcons name="refresh" size={24} color="#ffffff" />
)}
</TouchableOpacity>
),
});
}, [navigation, isRefreshing, handleRefresh]);
const handlePressTask = (id: string) => {
navigation.navigate('TaskEdit', { taskId: id });