跨设备流转实战：RN 应用在手机/平板/车机间的无缝切换

# 安装鸿蒙分布式 RN 插件
npm install @ohos/react-native-distributed --save

# 安装状态管理工具（Redux 或 Zustand）
npm install @reduxjs/toolkit react-redux --save

import { DistributedManager } from '@ohos/react-native-distributed';

// 初始化分布式服务
DistributedManager.init({
  appId: 'com.example.taskmanager', // 应用唯一标识
  deviceId: DistributedManager.getDeviceId(), // 当前设备 ID
});

// 监听设备列表变化（用于展示可流转的目标设备）
DistributedManager.onDeviceListChange((devices) => {
  console.log('可用设备:', devices);
  setAvailableDevices(devices); // 更新 RN 状态
});

// store/tasksSlice.js
import { createSlice } from '@reduxjs/toolkit';

const tasksSlice = createSlice({
  name: 'tasks',
  initialState: [],
  reducers: {
    addTask: (state, action) => {
      state.push({ id: Date.now(), text: action.payload, completed: false });
    },
    toggleTask: (state, action) => {
      const task = state.find(t => t.id === action.payload);
      if (task) task.completed = !task.completed;
    },
  },
});

export const { addTask, toggleTask } = tasksSlice.actions;
export default tasksSlice.reducer;

// screens/TaskListScreen.js
import { DistributedTask } from '@ohos/react-native-distributed';
import { useDispatch, useSelector } from 'react-redux';
import { addTask, toggleTask } from '../store/tasksSlice';

const TaskListScreen = () => {
  const dispatch = useDispatch();
  const tasks = useSelector(state => state.tasks);
  const [targetDevice, setTargetDevice] = useState(null);

  // 触发流转到目标设备
  const startMigration = async () => {
    if (!targetDevice) return;

    // 将当前任务列表序列化为 JSON
    const tasksData = JSON.stringify(tasks);

    // 调用鸿蒙 API 发起流转
    try {
      await DistributedTask.startMigration({
        taskId: 'task_list_001', // 任务唯一标识
        data: tasksData,         // 待同步的数据
        targetDeviceId: targetDevice.id, // 目标设备 ID
      });
      Alert.alert('流转成功', `任务列表已发送到 ${targetDevice.name}`);
    } catch (error) {
      console.error('流转失败:', error);
    }
  };

  // 接收来自其他设备的流转任务
  useEffect(() => {
    DistributedTask.onTaskReceived((receivedData) => {
      if (receivedData.taskId === 'task_list_001') {
        const parsedTasks = JSON.parse(receivedData.data);
        parsedTasks.forEach(task => dispatch(addTask(task.text))); // 更新 Redux 状态
      }
    });
  }, []);

  return (
    <View>
      <FlatList
        data={tasks}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => dispatch(toggleTask(item.id))}>
            <Text style={{ textDecorationLine: item.completed ? 'line-through' : 'none' }}>
              {item.text}
            </Text>
          </TouchableOpacity>
        )}
      />
      <Button title="流转到其他设备" onPress={startMigration} />
      <Picker
        selectedValue={targetDevice?.id}
        onValueChange={(id) => setTargetDevice(availableDevices.find(d => d.id === id))}
      >
        {availableDevices.map(device => (
          <Picker.Item key={device.id} label={device.name} value={device.id} />
        ))}
      </Picker>
    </View>
  );
};

import { AdaptiveView } from '@ohos/react-native-adaptive-layout';

<AdaptiveView
  style={{
    padding: AdaptiveView.safeAreaInsets.left, // 自动适配安全区域
  }}
>
  {/* 内容会根据设备类型自动调整布局 */}
</AdaptiveView>

// 在 Redux 中间件中集成 DDS 同步逻辑
const ddsMiddleware = store => next => action => {
  if (action.type === 'tasks/addTask') {
    const tasksData = JSON.stringify(store.getState().tasks);
    DistributedDataManager.syncData('task_list_001', tasksData); // 同步到云端
  }
  return next(action);
};