React Native 中的 Flatlist 图像源

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

React Native FlatList renderItem 回调获取一个带有 3 个 props 的对象参数，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

防止在键中使用数组索引（react/no-array-index-key）

如果元素在其key 中使用数组索引，则发出警告。

key 被 React 用于identify which items have changed, are added, or are removed and should be stable。

使用数组索引是个坏主意，因为它不能唯一标识您的元素。在对数组进行排序或将元素添加到数组开头的情况下，即使表示该索引的元素可能相同，索引也会更改。这会导致不必要的渲染。

我们应该为每个项目创建唯一的键（如果我们的项目数量很大，可以将它们存储在我们的图像数组中），方法是在图像名称上使用一些快速散列算法，如 CRC32 或通过使用nanoid为每张图片生成一个随机密钥。

Answer 2

发生这种情况是因为您试图解构一个不存在的 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 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
                }}
            />
        )}
    />
);