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

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 部分无效（这意味着我可以看到标题，但看不到图像。我尝试直接放置 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

在 CategoryScreen

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

在 CategoryGridTile 中

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

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

Using a local img in flatlist (React-Native)

javascript

json

reactjs

react-native

react-native-flatlist