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

您必须将类别作为道具发送给CategotyGridTile

在CategoryScreen

function recalculateAndUpdateTimeSpan() {

}

window.onload = function() {
  setInterval(recalculateAndUpdateTimeSpan, 100);
}

在CategoryGridTile

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

在平面列表中使用本地img（React-Native）

1 个答案: