迁移到最新的Carousel版本

本文向您展示如何迁移到Vega Carousel。如果您愿意，可以使用用于AI驱动式开发的Amazon Devices Builder Tools，并搭配兼容的AI代理进行迁移。

从VUIC Carousel迁移到Vega Carousel

以下部分介绍如何从Vega用户界面组件库中包含的Carousel迁移到作为单独程序包提供的Vega Carousel。

迁移属性

要使用新版本的Carousel，您需要对下面列出的属性进行更改。

了解有关Vega Carousel及其支持的属性的更多信息。

导入Vega Carousel程序包

import { Carousel } from '@amazon-devices/vega-carousel';

示例

以下示例演示了如何使用带有属性的Vega Carousel。

export function ItemView({ item, index }: CarouselRenderInfo<any>): JSX.Element {
    const [state, setState] = useState(false);
    return (
        <Pressable
            onFocus={() => {
                setState(true)
            }}
            onBlur={() => {
                setState(false)
            }}
            style={[styles.card, state && styles.focus]}
        >
            <View style={[{ flexDirection: 'column' }]}>
                <Image style={styles.image} source= />
            </View>
        </Pressable>
    );
}

export const renderItem =
    useCallback(({ item, index }: CarouselRenderInfo<any>) => {
        return (
            <ItemView index={index} item={item} />
        );
    }, []);

const getItem = useCallback((index: number) => {
    if (index >= 0 && index < data.length) {
        return data[index];
    }
    return undefined;
}, [data]);

const getItemCount = useCallback(() => {
    return data.length;
}, [data]);

const getItemKey = (info: CarouselRenderInfo) =>
   `${info.url} ${info.item.index}`

const notifyDataError = (error: any) => {
    return false; // Don't retry
};

<Carousel
   orientation={'horizontal'}
   dataAdapter=
   renderItem={renderItem}
   selectionStrategy='anchored'
   testID='Carousel'
   `itemStyle=`
 />

使用Amazon Devices Builder Tools MCP服务器并搭配AI代理迁移到Vega Carousel

Amazon Devices Builder Tools MCP服务器可帮助您从Vega用户界面组件库中包含的Carousel迁移到作为单独程序包提供的Vega Carousel。Amazon Devices Builder Tools MCP服务器的程序包是@amazon-devices/amazon-devices-buildertools-mcp。要了解更多信息，请参阅设置用于AI驱动式开发的Amazon Devices Builder Tools。

先决条件

• 支持MCP的AI代理：
  • Kiro CLI
  • Cursor
  • VSCode Copilot
  • Claude Code CLI
  • Amazon Q IDE
  • Amazon Q CLI
  • Cline
• 实现VUIC Carousel的Vega应用项目。

步骤1： 安装Amazon Devices Builder Tools MCP服务器

在您的项目目录中运行以下命令：

npx @amazon-devices/amazon-devices-buildertools-mcp@latest --init-context

按照交互式提示进行操作：

1. 选择您的AI代理（例如，Cline为7）。
2. 输入Y以自动更新代理的MCP设置。
3. 选择默认的上下文文档安装路径。
4. 查看并合并/更新已安装的上下文文档。

步骤2： 验证MCP安装

在AI代理的聊天界面中，要求代理：

列出Amazon Devices Builder Tools MCP服务器提供的工具

会显示以下消息：

 - read_document - 阅读Vega文档 - list_documents - 列出可用文档 - analyze_perfetto_traces - 分析性能跟踪

步骤3： 运行Carousel迁移（自然语言）

在您的AI代理的聊天界面中，要求它：

将我的MovieCarousel.tsx从Carousel V1升级到V2

或者更具体要求它：

帮我将/Volumes/workplace/vega-video-sample/src/components/MovieCarousel.tsx从Carousel V1迁移到V2

AI代理自动执行的步骤概述

1. 在MCP文档中阅读轮播迁移工作流。
2. 按照分步迁移说明进行操作。
3. 每一步都需要您的批准。

您的AI引导式迁移过程的详细信息

您的AI代理会引导您完成以下操作。

1. 创建备份： YourCarousel_ORIGINAL.tsx。
2. 更新导入：@amazon-devices/kepler-ui-components → @amazon-devices/vega-carousel
3. 更新package.json： 添加@amazon-devices/vega-carousel: ~0.1.0
4. 迁移数据访问权限：数据属性 → dataAdapter及函数。
5. 迁移所有属性： VUICL Vega属性 → Vega Carousel等效属性。
6. 更新逻辑：onFocus → onSelectionChanged（如果适用）。
7. 清理： 移除未使用的VUIC Carousel代码。

步骤4： 安装依赖项

迁移完成后，要下载@amazon-devices/vega-carousel程序包，请运行以下命令。

npm install

步骤5： 构建和测试

1. 要进行构建，请使用以下命令。

   复制代码 已复制到剪贴板。

   npm run build
   

2. 要运行，请使用以下命令。

   复制代码 已复制到剪贴板。

   npm test
   

预期结果

• 构建成功。
• 测试通过（您可能需要使用npm test -- -u更新快照）。
• 没有lint错误。

示例： Cline迁移会话

要求代理：

Upgrade my MovieCarousel.tsx from Carousel V1 to V2

Cline如下响应。

• 从MCP读取carousel.md工作流。
• 创建备份文件。
• 逐步提出更改建议。
• 每次修改前都需要获得批准。
• 自动完成迁移。

批准每个步骤后，运行以下命令。

npm install

npm run build

结果： VUIC Carousel成功迁移到Vega Carousel。

常见问题和解决方案

移除未使用的变量

原因： 不再需要VUIC Carousel变量（viewInfos、getViewForIndex）。

解决方案： 要求AI： “Remove unused variables from the migration.”（从迁移中删除未使用的变量。）

内联样式警告

原因：itemStyle对象以内联方式传递。

解决方案： 要求AI： “Extract itemStyle to constants.”（将itemStyle提取为常量。）

快照测试失败

原因： 组件结构已更改。解决方案： 运行npm test -- -u以更新快照。

迁移验证

迁移后，验证以下内容。

1. 导入已更新： 检查导入中的@amazon-devices/vega-carousel。
2. Package.json已更新： 两个程序包都存在（其他组件为vega-carousel + kepler-ui-components）。
3. 备份已创建：*_ORIGINAL.tsx文件存在。
4. 构建成功：npm run build通过。
5. 测试通过：npm test通过。

关键迁移更改

如何使用MCP设置支持的AI代理

以下支持的AI代理链接到相应的MCP设置说明。

• Cursor
• Github Copilot（仅提供英文版）
• Claude Code CLI（仅提供英文版）
• Amazon Q IDE扩展
• Amazon Q CLI (Kiro)
• Cline（仅提供英文版）

成功标准

• 所有Carousel文件均已迁移。
• 构建通过并且没有错误。
• 测试通过（如果需要则更新快照）。
• 没有引入新的lint错误。
• 创建备份文件以进行回滚。

支持

• 设置用于AI驱动式开发的Amazon Devices Builder Tools
• NPM程序包（仅提供英文版）
• MCP协议（仅提供英文版）

Last updated: 2026年5月6日