React Native：如何将basicCards包裹在ScrollView中实现滚动？

嘿，这个问题我之前也碰到过，其实核心原因很简单：你直接返回basicCards数组的时候，这些组件并没有被ScrollView这个滚动容器包裹，自然就没有滚动效果啦！而你硬编码的时候是把每个BasicCard都放在ScrollView内部，所以能正常滚动。

正确的写法 #

你只需要把动态生成的basicCards数组直接作为ScrollView的子元素渲染就可以了，不需要硬编码每一项。修改后的代码如下：

function CardCreator(props) {
  const cards = props.cards;
  
  const basicCards = cards.map((c, index) => {
    // 注意：如果你的cards项有唯一id，最好用c.id代替index作为key，性能更好
    return <BasicCard key={index} character={c} />;
  });

  return (
    <ScrollView>
      {/* 直接渲染整个组件数组 */}
      {basicCards}
    </ScrollView>
  );
}

更简洁的写法 #

你甚至可以直接在ScrollView内部写map逻辑，省去中间变量，代码更清爽：

function CardCreator(props) {
  const cards = props.cards;

  return (
    <ScrollView>
      {cards.map((c, index) => (
        <BasicCard key={index} character={c} />
      ))}
    </ScrollView>
  );
}

小提醒 #

关于key的使用：虽然用index作为key在静态列表中没问题，但如果你的卡片列表后续会有添加、删除、排序等操作，建议使用每个卡片数据里的唯一标识（比如c.id）作为key，这样React能更高效地更新组件，避免出现渲染异常。

内容的提问来源于stack exchange，提问作者mask