React Native数组渲染重叠、key属性使用及语法错误修复

1. 先解决添加key时的语法错误 #

你碰到的Unexpected token错误，基本是key属性的写法不符合JSX规范导致的。正确的写法是把key作为组件的顶层属性传入，别嵌套到组件内部：

// 错误写法（大概率是你出错的原因）
<PreviewName>
  key={item.id}
  {/* 其他组件内容 */}
</PreviewName>

// 正确写法
<PreviewName key={item.id} name={item.name} />

如果数组里的元素没有自带唯一id，临时可以用数组索引当key（不推荐用于会动态增删的列表，但能先解决警告）：

<PreviewName key={index} name={item.name} />

注意：key必须是字符串或数字，而且同个列表里每个子元素的key不能重复。

2. 修复两行数组重叠的问题 #

要让两个数组上下排列，用View分别包裹每个数组的渲染结果，再通过布局样式控制垂直排列：

import { View } from 'react-native';

// 你的组件返回部分
return (
  <View style={{ flex: 1 }}>
    {/* 第一行数组容器 */}
    <View style={{ marginBottom: 20 }}>
      {firstArray.map((item) => (
        <PreviewName key={item.id} name={item.name} />
      ))}
    </View>
    {/* 第二行数组容器 */}
    <View>
      {secondArray.map((item) => (
        <PreviewName key={item.id} name={item.name} />
      ))}
    </View>
  </View>
);

• 外层View默认是垂直排列（flexDirection: column），能保证两个数组容器上下分布。
• 给第一个数组容器加marginBottom，让两行之间留出间距，避免重叠。
• 如果数组元素太多，外层可以套个ScrollView防止内容溢出屏幕。

3. 彻底消除key警告 #

尽量用数据本身的唯一标识当key（比如后端返回的id字段），别用数组索引——索引会在列表元素增删时变化，导致React渲染异常：

{firstArray.map((item) => (
  <PreviewName key={item.id} name={item.name} />
))}

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