feat: 添加任务刷新功能至任务上下文,并在任务列表屏幕中实现下拉刷新
This commit is contained in:
parent
e4a7218f81
commit
ece6728e94
@ -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,
|
||||
],
|
||||
);
|
||||
|
||||
|
@ -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 });
|
||||
|
Loading…
x
Reference in New Issue
Block a user