React Native 中的平面列表图像源

Question

我正在尝试在 React Native 中渲染一个 FlatList，它就像一个图像轮播。

我想在 assets 文件夹中提供图像源并在 renderItem 中传递每个项目源，但我得到错误 undefined is not an object。

这是状态：

export default function App() {
  const [images, setimages] = useState([
    {src:require('./assets/image1.png'),key:'1'},
    {src:require('./assets/image2.png'),key:'2'},
    {src:require('./assets/image3.png'),key:'3'},
    {src:require('./assets/image4.png'),key:'4'},
    {src:require('./assets/image5.png'),key:'5'}
  ]);

这里是 FlatList:

<FlatList
  horizontal={true} 
  showsHorizontalScrollIndicator={false} 
  data={images}
  renderItem={ ({images}) => (
    <Image source={images.src} style={{
      width:260,
      height:300,
      borderWidth:2,
      borderColor:'#d35647',
      resizeMode:'contain',
      margin:8
    }}></Image>
  )}
/>

Answer 1

发生这种情况是因为您试图解构一个不存在的 images 参数，它称为 item。

试试这个：

return (
    <FlatList 
        horizontal
        showsHorizontalScrollIndicator={false}
        data={images}
        renderItem={({ item }) => (
            <Image 
                source={item.src}
                style={{
                    width:260,
                    height:300,
                    borderWidth:2,
                    borderColor:'#d35647',
                    resizeMode:'contain',
                    margin:8
                }}
            />
        )}
    />
);

Answer 2

React Native FlatList renderItem 回调获取具有 3 个属性的对象参数，item、index 和 separators:

renderItem

renderItem({item, index, separators});

您不必在数组中定义键，只需定义图像源，然后在 renderItem 函数中使用 item 和 index：

只定义一个包含源的数组：

const [images, setimages] = useState([
  require('./assets/image1.png'),
  require('./assets/image2.png'),
  require('./assets/image3.png'),
  require('./assets/image4.png'),
  require('./assets/image5.png')
]);

并使用 item 和 index 作为 source 和 key:

return (
  <FlatList
    horizontal={true} 
    showsHorizontalScrollIndicator={false} 
    data={images}
    renderItem={ ({ item, index }) => (
      <Image source={item} /* Use item to set the image source */
        key={index} /* Important to set a key for list items,
                       but it's wrong to use indexes as keys, see below */
        style={{
          width:260,
          height:300,
          borderWidth:2,
          borderColor:'#d35647',
          resizeMode:'contain',
          margin:8
        }}
      />
    )}
  />
);

更新

我们不应该为 JSX 键使用索引，因为在重新排列或数组中，我们最终会得到指向不同项目的相同索引。

有关于该问题的 ESLint 规则 eslint-plugin-react:

eslint-plugin-react

Prevent usage of Array index in keys (react/no-array-index-key)

Warn if an element uses an Array index in its key.

The key is used by React to identify which items have changed, are added, or are removed and should be stable.

It's a bad idea to use the array index since it doesn't uniquely identify your elements. In cases where the array is sorted or an element is added to the beginning of the array, the index will be changed even though the element representing that index may be the same. This results in unnecessary renders.

我们应该为每个项目创建唯一的键（如果我们有大量的项目，我们可以将它们存储在我们的图像数组中）通过使用一些快速散列算法，如CRC32 on the image name or by using nanoid 为每个图像生成一个随机密钥。

Answer 3

上面的评论是正确的，但是在您分配图像的 url 的来源中有 uri 属性，请参阅：

return (
    <FlatList 
        horizontal
        showsHorizontalScrollIndicator={false}
        data={images}
        renderItem={({ item }) => (
            <Image 
                source={{ uri: item.src }}
                style={{
                    width:260,
                    height:300,
                    borderWidth:2,
                    borderColor:'#d35647',
                    resizeMode:'contain',
                    margin:8
                }}
            />
        )}
    />
);