Image 将required（）图像作为道具传递时出错

我有一个名为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}
/>

然后我在CategoryItem中使用图像道具，如下所示：

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

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

并通过简单的操作调用图像

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

然而，当我这样做时，应用程序崩溃了，它说

Image

是一个数字。

---

在记录了

item

的外观之后，我发现

require（）

ing将图像转换为一个数字，它只需以不同的方式传递图像，就会崩溃。有什么想法吗？

问题是局部变量

Image

正在对名为

Image

的组件进行阴影处理

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

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

import { Image } from 'react-native';

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

错误告诉您组件是一个编号的原因是React本机资产导入如何工作的实现细节。当您使用

require（'path.jpg'）

导入图像时，React Native会为该图像分配一个唯一的数字ID，并返回该ID而不是图像路径描述符。出于性能原因，这是有益的，因此它可以传递一个数字，而不是为每个呈现在本机javascript桥上传递描述符，这对于序列化和marshall来说更便宜

---

作为旁注，在

较低的用例中声明组件道具是一种常见的React实践，因此您将使用
而不是
。这只是一种约定，但在本例中，它可以避免此错误。
问题在于局部变量
Image
正在对名为
Image
的组件进行阴影处理

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

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

import { Image } from 'react-native';

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

错误告诉您组件是一个编号的原因是React本机资产导入如何工作的实现细节。当您使用
require（'path.jpg'）
导入图像时，React Native会为该图像分配一个唯一的数字ID，并返回该ID而不是图像路径描述符。出于性能原因，这是有益的，因此它可以传递一个数字，而不是为每个呈现在本机javascript桥上传递描述符，这对于序列化和marshall来说更便宜

作为旁注，在
较低的用例中声明组件道具是一种常见的React实践，因此您将使用
而不是
。这只是一个约定，但在本例中，它可以避免此错误。
您实际使用的是RequireJS吗？如果没有，您应该删除该标记，因为RequireJS是一个特定的产品。如果您使用的是RequireJS，那么您的问题需要进行编辑，以提供上下文来解释您是如何使用它的（不，单次
require
调用是不够的），因为没有理由相信它实际上是您问题的一个因素。您真的在使用RequireJS吗？如果没有，您应该删除该标记，因为RequireJS是一个特定的产品。如果您使用的是RequireJS，那么您的问题需要进行编辑，以提供上下文来解释您是如何使用它的（不，单次
require
调用是不够的），因为没有理由相信它实际上是您问题的一个因素。感谢您的精彩而清晰的解释。我没有意识到我的错误。嘿，我有一个组件，我把一个图像作为道具传递，其他道具导航，我想在react导航中把我传递的图像作为道具，我如何处理这些<代码>{this.props.navigation.navigate（'Itme'，{image:this.props.img，//not work！！}）；}}}/>
@jevakallio感谢您的精彩而清晰的解释。我没有意识到我的错误。嘿，我有一个组件，我把一个图像作为道具传递，其他道具导航，我想在react导航中把我传递的图像作为道具，我如何处理这些<代码>{this.props.navigation.navigate（'Itme'，{image:this.props.img，//不工作！！}）；}}}/>
@jevakallio