将 required() 图像作为道具传递时出错

Question

我有一个名为 data.js 的文件，我在其中导出了一个对象，其中一个元素是图像。看起来是这样的：

var data = [
  {
    "id": 1,
    "Category": "Category Title",
    "Image": require("../images/comingsoon.png"),
    "Summary": ""
  },

然后在另一个组件中，我导入数据变量并使用 FlatList 将 data.Image 作为道具传递给另一个组件。

<FlatList
   style={{margin:5}}
   numColumns={2}
   data={this.state.data}
   renderItem={({item}) => item}
/>

item 看起来像这样：

<CategoryItem key={item.id} Image={item.Image} Category={item.Category}/>

然后我像这样在 CategoryItem 中使用 Image 道具：

<Image source={this.props.item.Image} style={styles.CategoryImage}>

而且效果很好！... 但我想像这样简单地将 Item 作为道具传递给 CategoryItem：

<CategoryItem key={item.id} item={item}/>

一旦进入 CategoryItem，我会这样做：

  render(){
    const {Category, Image} = this.props.item;

并通过执行来调用图像

<Image source={Image} style={styles.CategoryImage}>

但是，当我这样做时，应用程序崩溃并显示Image 是一个数字。

在记录item 的样子后，我发现require()ing 将图像转换为数字，它应该通过简单地传递它来工作，它崩溃了。有什么想法吗？

Answer 1

问题在于局部变量 Image 正在隐藏名为 Image 的组件。

您的代码经过简化后可能如下所示：

import { Image } from 'react-native';

class CategoryItem extends React.Component {
  render() {
    const { Category, Image } = this.props;
    return <Image source={Image} />
  }
}

<Image /> 声明不是像您期望的那样引用组件，而是引用 Image 属性。

这很容易通过重命名变量来解决：

class CategoryItem extends React.Component {
  render() {
    const { Category, Image: imageSource } = this.props;
    return <Image source={imageSource} />
  }
}

错误告诉您组件是 number 的原因是 React Native 资产导入如何工作的实现细节。当您使用 require('path.jpg') 导入图像时，React Native 会为该图像分配一个唯一的数字 ID 并返回它而不是图像路径描述符。出于性能原因，这有利于性能，因此它可以传递一个数字，而不是为每个渲染传递一个原生 JavaScript 桥的描述符，这样序列化和编组成本更低。

附带说明一下，在 lowerCamelCase 中声明组件 props 是一种常见的 React 做法，因此您将使用 <CategoryItem image={} /> 代替 <CategoryItem Image={} />。这只是一个约定，但在这种情况下，它可以避免这个错误。