错误传递required（）图像作为道具

Question

我有一个名为data.js的文件，我在其中导出一个对象，其中一个元素是Image。这是它的外观：

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

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

<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 prop，如下所示：

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

这完美无瑕！... 但我想简单地将Item作为propI传递给CategoryItem：

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

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

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

只需执行

即可调用图像

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

然而，当我这样做时，应用程序崩溃并且它表示Image是一个数字。

在记录了item的内容之后，我发现require()将图像转换为数字，并且只需简单地传递它就可以工作，它会崩溃。有什么想法吗？

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，并返回该图像而不是图像路径描述符。这有利于性能原因，因此不是为每个渲染在native-javascript桥上传递描述符，而是可以传递一个数字，这对序列化和编组来说更便宜。

作为旁注，在[{1}}中声明组件道具是一种常见的React练习，因此不是lowerCamelCase /＆gt;你会<CategoryItem Image={}。这只是一个惯例，但在这种情况下，它可以避免这个错误。