在 flatlist (React-Native) 中使用本地 img

Question

我的问题可能很基本，但我是编程新手。 基本上我想看到每个类别的标题和 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用于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}
        />
        )
}

Answer 1

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

在类别屏幕中

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

在 CategoryGridTile 中

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