一、核心知识点:InteractionManager 交互优化 完整核心用法

1. 用到的纯内置组件与 API

所有能力均为 RN 原生自带,全部从 react-native 核心包直接导入,无任何额外依赖、无任何第三方库,鸿蒙端无任何兼容问题,也是实现交互优化的全部核心能力,零基础易理解、易复用,无任何冗余,所有交互优化功能均基于以下组件/API 原生实现:

二、实战核心代码解析

1. InteractionManager 任务调度流程图

核心要点解析:

• 同步优先:优先执行同步操作,确保响应速度
• 延迟执行:将耗时任务延迟到交互完成后执行
• 任务调度:InteractionManager 智能调度任务执行时机
• 任务分类:根据任务类型执行不同的处理逻辑
• 性能优化:避免在用户交互时执行耗时任务

2. InteractionManager 执行时序图

核心要点解析:

• 同步执行:立即执行同步操作,提供即时反馈
• UI更新:优先更新UI,确保用户体验
• 任务注册:将耗时任务注册到 InteractionManager
• 智能调度:等待交互完成后再执行延迟任务
• 结果处理:任务完成后处理结果并更新UI

3. 任务优先级调度流程图

核心要点解析:

• 优先级排序:按任务优先级从高到低排序
• 任务调度:高优先级任务优先执行
• 空闲执行:中优先级任务在系统空闲时执行
• 延迟执行:低优先级任务等待所有高优先级任务完成
• 循环处理:持续处理任务队列中的任务

4. 交互优化数据结构定义

定义交互优化数据结构,包含任务信息、执行状态、性能数据等属性。这是整个交互优化系统的基础,良好的数据结构设计能让后续开发事半功倍。

// 注意：在实际代码中，类型定义如下
// type TaskPriority = 'high' | 'medium' | 'low';
// type TaskType = 'animation' | 'network' | 'data' | 'ui' | 'custom';

interface InteractionTaskExample {
  id: string; // 任务唯一标识
  name: string; // 任务名称
  type: 'animation' | 'network' | 'data' | 'ui' | 'custom'; // 任务类型
  priority: 'high' | 'medium' | 'low'; // 任务优先级
  executeTime: number; // 执行时间戳
  duration: number; // 执行时长(毫秒)
  status: 'pending' | 'running' | 'completed' | 'failed'; // 任务状态
  error?: string; // 错误信息
}

interface PerformanceMetrics {
  totalTasks: number; // 总任务数
  completedTasks: number; // 完成任务数
  failedTasks: number; // 失败任务数
  averageDuration: number; // 平均执行时长
  totalDuration: number; // 总执行时长
}

interface InteractionManagerState {
  tasks: InteractionTask[]; // 任务列表
  isProcessing: boolean; // 是否正在处理
  performanceMetrics: PerformanceMetrics; // 性能指标
}

核心要点解析:

• 类型安全设计:使用 TypeScript 的 type 和 interface 定义数据结构,确保类型安全
• 任务分类:使用 TaskType 区分不同类型的任务
• 优先级控制:使用 TaskPriority 控制任务执行顺序
• 状态跟踪:跟踪每个任务的执行状态
• 性能监控:统计任务的执行性能数据
• 鸿蒙端兼容性:这些数据结构都是纯 JavaScript/TypeScript 类型,在鸿蒙端完全兼容

5. InteractionManager 核心方法详解

InteractionManager 提供了以下核心方法用于交互优化:

// 在动画/交互完成后执行任务
InteractionManager.runAfterInteractions(() => {
  // 执行耗时操作
  console.log('交互完成,执行延迟任务');
});

// 创建交互句柄
const handle = InteractionManager.createInteractionHandle();

// 释放交互句柄
InteractionManager.clearInteractionHandle(handle);

// 检查是否有正在进行的交互
const hasPendingInteractions = InteractionManager.getPendingInteractionCount() > 0;

核心要点详解:

• runAfterInteractions:在所有动画和交互完成后执行回调函数
• createInteractionHandle:创建交互句柄,标记交互开始
• clearInteractionHandle:释放交互句柄,标记交互结束
• getPendingInteractionCount:获取当前正在进行的交互数量

6. 动画优化详解

实现动画优化逻辑,使用 InteractionManager 确保动画流畅性。这是交互优化的核心功能。

const executeAnimationTaskExample = async (task: InteractionTaskExample): Promise<void> => {
  return new Promise((resolve, reject) => {
    const startTime = Date.now();

    // 使用 InteractionManager 确保动画流畅
    InteractionManager.runAfterInteractions(() => {
      try {
        // 执行动画
        Animated.timing(animatedValue, {
          toValue: 1,
          duration: 1000,
          useNativeDriver: true,
        }).start(() => {
          const duration = Date.now() - startTime;
          updateTaskStatus(task.id, 'completed', duration);
          resolve();
        });
      } catch (error) {
        const duration = Date.now() - startTime;
        updateTaskStatus(task.id, 'failed', duration, error as string);
        reject(error);
      }
    });
  });
};

动画优化逻辑:

• 延迟执行:将动画任务延迟到交互完成后执行
• 流畅性保证:避免动画与用户操作冲突
• 性能监控:记录动画执行时长
• 错误处理:捕获并处理动画执行错误
• 状态更新:更新任务执行状态

7. 网络请求优化详解

实现网络请求优化逻辑,使用 InteractionManager 避免阻塞用户交互。这是交互优化的重要功能。

const executeNetworkTaskExample = async (task: InteractionTaskExample): Promise<void> => {
  const startTime = Date.now();

  try {
    // 使用 InteractionManager 延迟执行网络请求
    await new Promise<void>((resolve, reject) => {
      InteractionManager.runAfterInteractions(async () => {
        try {
          // 模拟网络请求
          await new Promise(resolve => setTimeout(resolve, 2000));

          const duration = Date.now() - startTime;
          // 模拟调用 updateTaskStatus 函数
          console.log(`网络任务 ${task.id} 完成，耗时: ${duration}ms`);
          resolve();
        } catch (error) {
          const duration = Date.now() - startTime;
          // 模拟调用 updateTaskStatus 函数
          console.error(`网络任务 ${task.id} 失败:`, error);
          reject(error);
        }
      });
    });
  } catch (error) {
    console.error('网络任务执行失败:', error);
  }
};

网络请求优化逻辑:

• 延迟执行:将网络请求延迟到交互完成后执行
• 避免阻塞:不阻塞用户的正常操作
• 超时处理:设置合理的超时时间
• 错误处理:捕获并处理网络请求错误
• 性能监控:记录网络请求执行时长

8. 批量任务处理详解

实现批量任务处理逻辑,使用 InteractionManager 优化批量操作性能。这是交互优化的高级功能。

const executeBatchTasksExample = async (tasks: InteractionTaskExample[]): Promise<void> => {
  const handle = InteractionManager.createInteractionHandle();

  try {
    // 按优先级排序任务
    const sortedTasks = [...tasks].sort((a, b) => {
      const priorityOrder = { high: 0, medium: 1, low: 2 };
      return priorityOrder[a.priority] - priorityOrder[b.priority];
    });

    // 串行执行任务（示例中，实际执行对应类型的处理逻辑）
    for (const task of sortedTasks) {
      // 根据任务类型执行相应的处理逻辑
      switch (task.type) {
        case 'animation':
          await executeAnimationTaskExample(task);
          break;
        case 'network':
          await executeNetworkTaskExample(task);
          break;
        default:
          console.log(`执行 ${task.type} 类型任务`);
          break;
      }
    }
  } finally {
    // 释放交互句柄
    InteractionManager.clearInteractionHandle(handle);
  }
};

批量任务处理逻辑:

• 优先级排序:按任务优先级从高到低排序
• 串行执行:避免并发执行导致的性能问题
• 交互标记:创建交互句柄标记批量操作
• 资源释放:完成后释放交互句柄
• 错误处理:捕获并处理批量执行错误

三、实战完整版:InteractionManager 交互优化

import React, { useState, useEffect, useCallback, useRef } from 'react';
import {
  View,
  Text,
  StyleSheet,
  SafeAreaView,
  TouchableOpacity,
  ScrollView,
  InteractionManager,
  Animated,
  Easing,
} from 'react-native';

type TaskPriority = 'high' | 'medium' | 'low';
type TaskType = 'animation' | 'network' | 'data' | 'ui' | 'custom';

interface InteractionTask {
  id: string;
  name: string;
  type: TaskType;
  priority: TaskPriority;
  executeTime: number;
  duration: number;
  status: 'pending' | 'running' | 'completed' | 'failed';
  error?: string;
}

interface PerformanceMetrics {
  totalTasks: number;
  completedTasks: number;
  failedTasks: number;
  averageDuration: number;
  totalDuration: number;
}

const InteractionManagerDemo = () => {
  const [tasks, setTasks] = useState<InteractionTask[]>([]);
  const [isProcessing, setIsProcessing] = useState(false);
  const [performanceMetrics, setPerformanceMetrics] = useState<PerformanceMetrics>({
    totalTasks: 0,
    completedTasks: 0,
    failedTasks: 0,
    averageDuration: 0,
    totalDuration: 0,
  });

  const animatedValue = useRef(new Animated.Value(0)).current;
  const taskCounter = useRef(0);

  // 更新任务状态
  const updateTaskStatus = useCallback((
    id: string,
    status: InteractionTask['status'],
    duration: number,
    error?: string
  ) => {
    setTasks(prev => prev.map(task =>
      task.id === id
        ? { ...task, status, duration, error }
        : task
    ));

    // 更新性能指标
    setPerformanceMetrics(prev => {
      const newMetrics = { ...prev };

      if (status === 'completed') {
        newMetrics.completedTasks++;
      } else if (status === 'failed') {
        newMetrics.failedTasks++;
      }

      newMetrics.totalDuration += duration;
      newMetrics.averageDuration =
        newMetrics.completedTasks + newMetrics.failedTasks > 0
          ? newMetrics.totalDuration / (newMetrics.completedTasks + newMetrics.failedTasks)
          : 0;

      return newMetrics;
    });
  }, []);

  // 添加任务
  const addTask = useCallback((type: TaskType, priority: TaskPriority) => {
    taskCounter.current++;
    const newTask: InteractionTask = {
      id: `task-${taskCounter.current}`,
      name: `${type} 任务 ${taskCounter.current}`,
      type,
      priority,
      executeTime: Date.now(),
      duration: 0,
      status: 'pending',
    };

    setTasks(prev => [...prev, newTask]);
    setPerformanceMetrics(prev => ({
      ...prev,
      totalTasks: prev.totalTasks + 1,
    }));
  }, []);

  // 执行任务
  const executeTask = useCallback(async (task: InteractionTask): Promise<void> => {
    // 不再使用单独的startTime，而是依赖任务执行的自然时长
    updateTaskStatus(task.id, 'running', 0);

    try {
      switch (task.type) {
        case 'animation':
          await executeAnimationTask(task);
          break;
        case 'network':
          await executeNetworkTask(task);
          break;
        case 'data':
          await executeDataTask(task);
          break;
        case 'ui':
          await executeUITask(task);
          break;
        case 'custom':
          await executeCustomTask(task);
          break;
      }
    } catch (error) {
      // 错误处理中，使用默认时长
      updateTaskStatus(task.id, 'failed', 0, (error as Error).message);
    }
  }, [updateTaskStatus]);

  // 执行动画任务
  const executeAnimationTask = useCallback((task: InteractionTask): Promise<void> => {
    return new Promise((resolve, reject) => {
      // 使用InteractionManager确保动画在交互完成时执行
      InteractionManager.runAfterInteractions(() => {
        try {
          // 重置动画值
          animatedValue.setValue(0);
          // 执行动画
          Animated.timing(animatedValue, {
            toValue: 1,
            duration: 1000,
            easing: Easing.ease,
            useNativeDriver: true,
          }).start(({ finished }) => {
            if (finished) {
              updateTaskStatus(task.id, 'completed', 1000);
            } else {
              updateTaskStatus(task.id, 'failed', 0, '动画未完成');
            }
            resolve();
          });
        } catch (error) {
          updateTaskStatus(task.id, 'failed', 0, (error as Error).message);
          reject(error);
        }
      });
    });
  }, [animatedValue, updateTaskStatus]);

  // 执行网络任务
  const executeNetworkTask = useCallback((task: InteractionTask): Promise<void> => {
    return new Promise((resolve, reject) => {
      const startTime = Date.now();

      InteractionManager.runAfterInteractions(async () => {
        try {
          // 模拟网络请求
          await new Promise(resolve => setTimeout(resolve, 2000));
          const duration = Date.now() - startTime;
          updateTaskStatus(task.id, 'completed', duration);
          resolve();
        } catch (error) {
          const duration = Date.now() - startTime;
          updateTaskStatus(task.id, 'failed', duration, (error as Error).message);
          reject(error);
        }
      });
    });
  }, [updateTaskStatus]);

  // 执行数据任务
  const executeDataTask = useCallback((task: InteractionTask): Promise<void> => {
    return new Promise((resolve, reject) => {
      const startTime = Date.now();

      InteractionManager.runAfterInteractions(() => {
        try {
          // 模拟数据处理
          const data = Array(10000).fill(0).map((_, i) => i * i);
          const sum = data.reduce((acc, val) => acc + val, 0);
          console.log('数据处理结果:', sum);

          const duration = Date.now() - startTime;
          updateTaskStatus(task.id, 'completed', duration);
          resolve();
        } catch (error) {
          const duration = Date.now() - startTime;
          updateTaskStatus(task.id, 'failed', duration, (error as Error).message);
          reject(error);
        }
      });
    });
  }, [updateTaskStatus]);

  // 执行UI任务
  const executeUITask = useCallback((task: InteractionTask): Promise<void> => {
    return new Promise((resolve, reject) => {
      const startTime = Date.now();

      InteractionManager.runAfterInteractions(() => {
        try {
          // 模拟UI更新
          console.log('更新UI组件');
          const duration = Date.now() - startTime;
          updateTaskStatus(task.id, 'completed', duration);
          resolve();
        } catch (error) {
          const duration = Date.now() - startTime;
          updateTaskStatus(task.id, 'failed', duration, (error as Error).message);
          reject(error);
        }
      });
    });
  }, [updateTaskStatus]);

  // 执行自定义任务
  const executeCustomTask = useCallback((task: InteractionTask): Promise<void> => {
    return new Promise((resolve, reject) => {
      const startTime = Date.now();

      InteractionManager.runAfterInteractions(() => {
        try {
          // 模拟自定义逻辑
          const result = Math.random() * 100;
          console.log('自定义任务结果:', result);

          const duration = Date.now() - startTime;
          updateTaskStatus(task.id, 'completed', duration);
          resolve();
        } catch (error) {
          const duration = Date.now() - startTime;
          updateTaskStatus(task.id, 'failed', duration, (error as Error).message);
          reject(error);
        }
      });
    });
  }, [updateTaskStatus]);

  // 处理所有任务
  const processAllTasks = useCallback(async () => {
    if (isProcessing || tasks.length === 0) return;

    setIsProcessing(true);

    try {
      // 按优先级排序任务
      const sortedTasks = [...tasks]
        .filter(task => task.status === 'pending')
        .sort((a, b) => {
          const priorityOrder = { high: 0, medium: 1, low: 2 };
          return priorityOrder[a.priority] - priorityOrder[b.priority];
        });

      // 串行执行任务，不再创建交互句柄，而是使用runAfterInteractions来处理
      for (const task of sortedTasks) {
        await executeTask(task);
      }
    } catch (error) {
      console.error('处理任务失败:', error);
    } finally {
      setIsProcessing(false);
    }
  }, [isProcessing, tasks, executeTask]);

  // 清空任务列表
  const clearTasks = useCallback(() => {
    setTasks([]);
    taskCounter.current = 0;
    setPerformanceMetrics({
      totalTasks: 0,
      completedTasks: 0,
      failedTasks: 0,
      averageDuration: 0,
      totalDuration: 0,
    });
  }, []);

  // 获取任务类型文本
  const getTaskTypeText = (type: TaskType): string => {
    const typeMap: Record<TaskType, string> = {
      animation: '动画',
      network: '网络',
      data: '数据',
      ui: 'UI',
      custom: '自定义',
    };
    return typeMap[type];
  };

  // 获取任务类型颜色
  const getTaskTypeColor = (type: TaskType): string => {
    const colorMap: Record<TaskType, string> = {
      animation: '#FF9800',
      network: '#2196F3',
      data: '#4CAF50',
      ui: '#9C27B0',
      custom: '#607D8B',
    };
    return colorMap[type];
  };

  // 获取任务优先级文本
  const getTaskPriorityText = (priority: TaskPriority): string => {
    const priorityMap: Record<TaskPriority, string> = {
      high: '高',
      medium: '中',
      low: '低',
    };
    return priorityMap[priority];
  };

  // 获取任务状态文本
  const getTaskStatusText = (status: InteractionTask['status']): string => {
    const statusMap: Record<InteractionTask['status'], string> = {
      pending: '待执行',
      running: '执行中',
      completed: '已完成',
      failed: '失败',
    };
    return statusMap[status];
  };

  // 获取任务状态颜色
  const getTaskStatusColor = (status: InteractionTask['status']): string => {
    const colorMap: Record<InteractionTask['status'], string> = {
      pending: '#999',
      running: '#FF9800',
      completed: '#4CAF50',
      failed: '#F44336',
    };
    return colorMap[status];
  };

  // 动画效果
  useEffect(() => {
    const animation = Animated.loop(
      Animated.sequence([
        Animated.timing(animatedValue, {
          toValue: 1,
          duration: 1000,
          easing: Easing.ease,
          useNativeDriver: true,
        }),
        Animated.timing(animatedValue, {
          toValue: 0,
          duration: 1000,
          easing: Easing.ease,
          useNativeDriver: true,
        }),
      ])
    );
    animation.start();

    return () => animation.stop();
  }, [animatedValue]);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.scrollContent}>
        <Text style={styles.title}>InteractionManager 交互优化</Text>

        {/* 性能指标 */}
        <View style={styles.card}>
          <Text style={styles.cardTitle}>性能指标</Text>
          <View style={styles.metricsRow}>
            <View style={styles.metricItem}>
              <Text style={styles.metricValue}>{performanceMetrics.totalTasks}</Text>
              <Text style={styles.metricLabel}>总任务</Text>
            </View>
            <View style={styles.metricItem}>
              <Text style={[styles.metricValue, { color: '#4CAF50' }]}>
                {performanceMetrics.completedTasks}
              </Text>
              <Text style={styles.metricLabel}>已完成</Text>
            </View>
            <View style={styles.metricItem}>
              <Text style={[styles.metricValue, { color: '#F44336' }]}>
                {performanceMetrics.failedTasks}
              </Text>
              <Text style={styles.metricLabel}>失败</Text>
            </View>
            <View style={styles.metricItem}>
              <Text style={styles.metricValue}>
                {performanceMetrics.averageDuration.toFixed(0)}ms
              </Text>
              <Text style={styles.metricLabel}>平均时长</Text>
            </View>
          </View>
        </View>

        {/* 动画演示 */}
        <View style={styles.card}>
          <Text style={styles.cardTitle}>动画演示</Text>
          <View style={styles.animationContainer}>
            <Animated.View
              style={[
                styles.animationBox,
                {
                  transform: [
                    {
                      scale: animatedValue.interpolate({
                        inputRange: [0, 1],
                        outputRange: [1, 1.5]
                      })
                    },
                    {
                      rotate: animatedValue.interpolate({
                        inputRange: [0, 1],
                        outputRange: ['0deg', '360deg'],
                      })
                    },
                  ],
                  opacity: animatedValue.interpolate({
                    inputRange: [0, 1],
                    outputRange: [0.5, 1]
                  }),
                },
              ]}
            />
          </View>
        </View>

        {/* 添加任务 */}
        <View style={styles.card}>
          <Text style={styles.cardTitle}>添加任务</Text>
          <View style={styles.buttonGroup}>
            <TouchableOpacity
              style={styles.button}
              onPress={() => addTask('animation', 'high')}
            >
              <Text style={styles.buttonText}>动画任务</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.button}
              onPress={() => addTask('network', 'medium')}
            >
              <Text style={styles.buttonText}>网络任务</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.button}
              onPress={() => addTask('data', 'low')}
            >
              <Text style={styles.buttonText}>数据任务</Text>
            </TouchableOpacity>
          </View>
        </View>

        {/* 执行任务 */}
        <View style={styles.card}>
          <Text style={styles.cardTitle}>执行任务</Text>
          <View style={styles.buttonGroup}>
            <TouchableOpacity
              style={[styles.button, isProcessing && styles.buttonDisabled]}
              onPress={processAllTasks}
              disabled={isProcessing}
            >
              <Text style={styles.buttonText}>
                {isProcessing ? '执行中...' : '执行所有任务'}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.button, styles.clearButton]}
              onPress={clearTasks}
            >
              <Text style={styles.buttonText}>清空任务</Text>
            </TouchableOpacity>
          </View>
        </View>

        {/* 任务列表 */}
        <View style={styles.card}>
          <Text style={styles.cardTitle}>任务列表</Text>
          {tasks.length === 0 ? (
            <Text style={styles.emptyText}>暂无任务</Text>
          ) : (
            tasks.map(task => (
              <View key={task.id} style={styles.taskItem}>
                <View style={styles.taskHeader}>
                  <Text style={styles.taskName}>{task.name}</Text>
                  <View style={[styles.statusBadge, { backgroundColor: getTaskStatusColor(task.status) }]}>
                    <Text style={styles.statusText}>{getTaskStatusText(task.status)}</Text>
                  </View>
                </View>
                <View style={styles.taskInfo}>
                  <View style={styles.taskInfoItem}>
                    <View style={[styles.typeBadge, { backgroundColor: getTaskTypeColor(task.type) }]}>
                      <Text style={styles.typeText}>{getTaskTypeText(task.type)}</Text>
                    </View>
                    <Text style={styles.priorityText}>
                      优先级: {getTaskPriorityText(task.priority)}
                    </Text>
                  </View>
                  <Text style={styles.durationText}>
                    {task.status === 'running' ? '执行中...' : `${task.duration}ms`}
                  </Text>
                </View>
                {task.error && (
                  <Text style={styles.errorText}>错误: {task.error}</Text>
                )}
              </View>
            ))
          )}
        </View>

        {/* 使用说明 */}
        <View style={styles.card}>
          <Text style={styles.cardTitle}>使用说明</Text>
          <Text style={styles.instructionText}>
            1. 点击"添加任务"按钮可以添加不同类型的任务
          </Text>
          <Text style={styles.instructionText}>
            2. 任务会按优先级从高到低执行
          </Text>
          <Text style={styles.instructionText}>
            3. InteractionManager 会在交互完成后执行任务
          </Text>
          <Text style={styles.instructionText}>
            4. 可以查看每个任务的执行状态和时长
          </Text>
          <Text style={styles.instructionText}>
            5. 动画演示展示了 InteractionManager 的优化效果
          </Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollContainer: {
    flex: 1,
  },
  scrollContent: {
    padding: 16,
    paddingBottom: 32,
  },
  title: {
    fontSize: 28,
    color: '#333',
    textAlign: 'center',
    marginBottom: 30,
    fontWeight: '700',
  },

  // 卡片样式
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 20,
    borderWidth: 1,
    borderColor: '#e0e0e0',
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
    marginBottom: 12,
  },

  // 性能指标样式
  metricsRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  metricItem: {
    alignItems: 'center',
  },
  metricValue: {
    fontSize: 24,
    fontWeight: '700',
    color: '#007DFF',
  },
  metricLabel: {
    fontSize: 12,
    color: '#666',
    marginTop: 4,
  },

  // 动画演示样式
  animationContainer: {
    height: 150,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
  },
  animationBox: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#007DFF',
  },

  // 按钮样式
  buttonGroup: {
    flexDirection: 'row',
    gap: 10,
    flexWrap: 'wrap',
  },
  button: {
    flex: 1,
    minWidth: 100,
    backgroundColor: '#007DFF',
    borderRadius: 8,
    height: 44,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonDisabled: {
    backgroundColor: '#999',
  },
  clearButton: {
    backgroundColor: '#F44336',
  },
  buttonText: {
    fontSize: 14,
    color: '#fff',
    fontWeight: '500',
  },

  // 任务列表样式
  taskItem: {
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
    padding: 12,
    marginBottom: 10,
  },
  taskHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 8,
  },
  taskName: {
    fontSize: 14,
    fontWeight: '600',
    color: '#333',
    flex: 1,
  },
  statusBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
  },
  statusText: {
    fontSize: 12,
    color: '#fff',
    fontWeight: '500',
  },
  taskInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  taskInfoItem: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  typeBadge: {
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 4,
  },
  typeText: {
    fontSize: 10,
    color: '#fff',
    fontWeight: '500',
  },
  priorityText: {
    fontSize: 12,
    color: '#666',
  },
  durationText: {
    fontSize: 12,
    color: '#007DFF',
    fontWeight: '600',
  },
  errorText: {
    fontSize: 12,
    color: '#F44336',
    marginTop: 4,
  },

  // 通用样式
  emptyText: {
    fontSize: 14,
    color: '#999',
    textAlign: 'center',
    paddingVertical: 20,
  },
  instructionText: {
    fontSize: 14,
    color: '#666',
    lineHeight: 22,
    marginBottom: 8,
  },
});

export default InteractionManagerDemo;

四、OpenHarmony6.0 专属避坑指南

以下是鸿蒙 RN 开发中实现「InteractionManager 交互优化」的所有真实高频踩坑点,按出现频率排序,问题现象贴合开发实际,解决方案均为「一行代码/简单配置」,所有方案均为鸿蒙端专属最优解,也是本次代码能做到零报错、完美适配的核心原因,零基础可直接套用,彻底规避所有交互优化相关的任务阻塞、性能下降、内存泄漏等问题,全部真机实测验证通过,无任何兼容问题:

五、扩展用法:InteractionManager 高频进阶优化

基于本次的核心 InteractionManager 代码,结合 RN 的内置能力,可轻松实现鸿蒙端开发中所有高频的交互优化进阶需求,全部为纯原生 API 实现,无需引入任何第三方库,零基础只需在本次代码基础上做简单修改即可实现,实用性拉满,全部真机实测通过,无任何兼容问题,满足企业级高阶需求:

✔️ 扩展1:结合 React Navigation 优化

在路由切换时使用 InteractionManager 优化性能:

import { useFocusEffect } from '@react-navigation/native';

const MyScreen = () => {
  useFocusEffect(
    useCallback(() => {
      InteractionManager.runAfterInteractions(() => {
        // 在路由切换完成后加载数据
        loadData();
      });
    }, [])
  );

  return <View>...</View>;
};

✔️ 扩展2:结合 Animated 优化

在复杂动画中使用 InteractionManager 优化性能:

const runComplexAnimation = () => {
  const handle = InteractionManager.createInteractionHandle();

  try {
    Animated.parallel([
      Animated.timing(anim1, { toValue: 1, duration: 1000 }),
      Animated.timing(anim2, { toValue: 1, duration: 1000 }),
    ]).start(() => {
      InteractionManager.clearInteractionHandle(handle);
      // 动画完成后执行后续操作
      executePostAnimationTasks();
    });
  } catch (error) {
    InteractionManager.clearInteractionHandle(handle);
  }
};

✔️ 扩展3:智能任务调度

根据系统负载动态调整任务执行时机:

const scheduleTask = (task: InteractionTask) => {
  const pendingCount = InteractionManager.getPendingInteractionCount();

  if (pendingCount > 3) {
    // 交互较多,延迟执行
    setTimeout(() => {
      InteractionManager.runAfterInteractions(() => {
        executeTask(task);
      });
    }, 100);
  } else {
    // 交互较少,立即执行
    InteractionManager.runAfterInteractions(() => {
      executeTask(task);
    });
  }
};

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.csdn.net