在平面列表中使用本地 img (React-Native)答案

【问题标题】：Using a local img in flatlist (React-Native)在平面列表中使用本地 img (React-Native)
【发布时间】：2020-04-09 04:29:29
【问题描述】：

我的问题可能是非常基本的，但我是编程新手。基本上我想看到一个平面列表，每个类别都有标题和 img

这是我的类别构造函数：

    class Category{
    constructor(id, title, catImg){
        this.id = id;
        this.title = title;
        this.catImg = catImg;
    }
}

这是我的 3 个类别：

     export const CATEGORIES = [
    new Category('c1', 'Studeren', require('../assets/studeren.png')),
    new Category('c2', 'Wonen', require('../assets/wonen.png')),
    new Category('c3', 'EersteVoertuig', require('../assets/voertuig.png'))
  ];

这是我要调用元素的地方：

    const CategoryGridTile = props  => {
    return(
        <TouchableOpacity style = {styles.gridItem} onPress = {props.onSelect}>
            <View >
                <Text>{props.title}</Text>
            </View>
            <Image source ={props.catImg} style={‌{width: 150, height: 150}}/>
        </TouchableOpacity>

    );
};

它适用于props.title 部分，但不适用于props.catImg 部分（意思是我可以看到标题，但看不到图像。我尝试直接放置img路径而不是props.catImg，并且可以，但这不是我想要的方式）

编辑：我认为也需要这段代码来理解我的错误？

const CategoryScreen = props => {
    const renderGridItem = (itemData) => {
        return <CategotyGridTile
        title ={itemData.item.title}
        onSelect={() =>{            
            props.navigation.navigate({
                routeName: 'CategorieVragen',
                params: {
                    categoryId: itemData.item.id
            }});
        }}/>;
    };
    return(
        <FlatList
        data={CATEGORIES}
        renderItem ={renderGridItem}
        numColums = {2}
        />
        )
}

【问题讨论】：

我实际上只是设法做到了。我现在要删除这个问题吗？

标签： javascript json reactjs react-native react-native-flatlist

【解决方案1】：

您必须将 CATEGORIES 作为道具发送到 CategotyGridTile

在类别屏幕中

return <CategotyGridTile 
    categories={CATEGORIES}
    {...props}
   />

在 CategoryGridTile 中

<Image source ={props.categories.catImg} style={‌{width: 150, height: 150}}/>

【讨论】：