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

Posted 2023-02-23

【中文标题】将 required() 图像作为道具传递时出错

【英文标题】：Error passing required() Image as a prop

【发布时间】：2018-01-31 03:43:19

【问题描述】：

我有一个名为 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 将图像转换为数字，它应该通过简单地传递它来工作，它崩溃了。有什么想法吗？

【问题讨论】：

你真的在使用 RequireJS 吗？如果不是，您应该删除该标签，因为 RequireJS 是一个特定的产品。如果您使用的是 RequireJS，那么您的问题需要编辑以提供解释您如何使用它的上下文（不，单个 require 调用是不够的），因为没有理由相信它实际上是您的问题的一个因素.

【参考方案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= />。这只是一个约定，但在这种情况下，它可以避免这个错误。

【讨论】：

感谢您出色而清晰的解释。我没有意识到我的错误。

嘿，我有一个组件，我将图像作为道具传递，其他道具导航，我想在 react-navigation 中获取我作为道具传递的图像，我如何处理这些？ <PopularFood img=require('../../assets/food-2.png') navigate=() => this.props.navigation.navigate('Itme', image: this.props.img, // not work!! ); />@jevakallio