React Native 中的平面列表图像源

Question

我正在尝试FlatList在 React Native 中渲染一个像图像轮播一样的图像。

我想在资产文件夹中提供图像源并在 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 NativeFlatList renderItem回调获取一个对象参数，其中包含 3 个道具item、index和separators：

renderItem

renderItem({item, index, separators});

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

只定义一个带有源的数组：

renderItem({item, index, separators});

并使用itemandindex为sourceand key：

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

更新

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

关于这个问题有一个 ESLint 规则eslint-plugin-react：

eslint-plugin-react

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

如果元素在其key.

在key所使用的反应以确定哪些项目已经改变，添加或去除并应该是稳定的。

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

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