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

我有一个名为data.js的文件，我在其中导出一个对象，其中一个元素是图像。这是它的外观：错误传递必需（）图像作为道具

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

然后在另一个分量I导入数据变量，我通过data.Image到另一个组件如使用FlatList道具。

<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 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将图像分成若干，它应该简单地通过它的工作方式不同，它崩溃。有什么想法吗？

来源

2017-08-22 Luis Rizo

你真的在使用RequireJS吗？如果不是，则应删除该标记，因为RequireJS是特定产品。如果您使用的是RequireJS，那么您的问题需要编辑，以便解释如何使用它（不，因为没有理由相信它实际上是您问题的一个因素。 – Louis

问题是本地变量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其原因是如何做出反应本土资产的进口工作实现细节。当您使用require('path.jpg')导入图像时，React Native会为该图像分配一个唯一的数字ID并返回该图像，而不是图像路径描述符。这对于性能的原因是有益的，所以不是在每个渲染器的native-javascript桥接器上传递一个描述符，它可以传递一个数字，这些数字便于序列化和编组。

作为一个方面说明，在lowerCamelCase中声明组件道具是一种常见的React练习，因此您将拥有<CategoryItem image={} />而不是<CategoryItem Image={} />。这只是一个惯例，但在这种情况下，它会避免这个错误。

来源

2017-08-22 21:55:34 jevakallio

感谢您的详细解释。我没有意识到我的错误。 –

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

回答

相关问题