问题描述
当我尝试获取以 require() 作为道具的 js 对象中的图像路径时,出现此错误。
Warning: Failed prop type: Invalid prop `source` supplied to `Image`.
CategoriesScreen.js
import React from "react";
import {
View,Text,FlatList,StyleSheet,TouchableOpacity,} from "react-native";
import { CATEGORIES } from "../Data/Dummy-Data";
import CategoryGrid from "../component/categoryGrid";
const CategoriesScreen = (props) => {
const renderGridItem = (itemData) => {
return (
<CategoryGrid
title={itemData.item.title}
imgurl={itemData.item.url}
//console.log (itemData.item.url)-> require(..) ->image path
onSelect={() =>
props.navigation.navigate({
routeName: "CategoryMeals",params: {
categoryId: itemData.item.id,},})
}
></CategoryGrid>
);
};
return (
<View>
<FlatList data={CATEGORIES} renderItem={renderGridItem} numColumns={2} />
</View>
);
};
CategoriesScreen.navigationoptions = {
headerTitle: "Meals Categories",};
const styles = StyleSheet.create({
screen: {
flex: 1,justifyContent: "center",alignItems: "center",//this is unused till Now.
},});
export default CategoriesScreen;
这里我保存了所有图片的路径
虚拟数据.js
import Category from "../Models/category";
export const CATEGORIES = [
new Category("C1","Italian","require('../assets/Images/italian.jpeg')"),new Category("C2","Indian","require('../assets/Images/Indian.jpeg')"),new Category("C3","french","require('../assets/Images/french.jpeg')"),new Category(
"C4","Hamburgers","require('../assets/Images/Hamburgers.jpeg')"
),new Category("C5","German","require('../assets/Images/German.jpeg')"),new Category("C6","Asian","require('../assets/Images/Asian.jpeg')"),new Category("C7","Breakfast","require('../assets/Images/Breakfast.jpeg')"),new Category("C8","Dinner","require('../assets/Images/Dinner.jpeg')"),];
category.js
class Category {
constructor(id,title,url) {
this.id = id;
this.title = title;
this.url = url;
}
}
export default Category;
CategoryGrid.js
import React from "react";
import {
TouchableOpacity,View,imagebackground,} from "react-native";
const CategoryGrid = (props) => {
return (
<TouchableOpacity style={styles.gridItems} onPress={props.onSelect}>
<View>
<imagebackground
source={props.imgurl}
style={{ width: "100%",height: "90%" }}
/>
<Text>{props.title}</Text>
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
gridItems: {
flex: 1,margin: 15,height: 150,});
export default CategoryGrid;
console.log() 在 CategoriesScreen.js 和 categoryGrid.js 中说 -> require(../assests/Images/image.jpeg)
我正在尝试将图像路径作为从 CategoryScreen.js 到 categoryGrid.js 的道具,后者作为对象存储在 Dummy-Data.js 中。
知道我做错了什么吗?
解决方法
这样做
<ImageBackground
source={{uri: props.imgUrl}}
style={{ width: "100%",height: "90%" }}
/>
,
import Category from "../Models/category";
export const CATEGORIES = [
new Category("C1","Italian",require("../assets/Images/italian.jpeg")),new Category("C2","Indian",require("../assets/Images/Indian.jpeg")),new Category("C3","French",require("../assets/Images/French.jpeg")),new Category("C4","Hamburgers",require("../assets/Images/Hamburgers.jpeg")),new Category("C5","German",require("../assets/Images/German.jpeg")),new Category("C6","Asian",require("../assets/Images/Asian.jpeg")),new Category("C7","Breakfast",require("../assets/Images/Breakfast.jpeg")),new Category("C8","Dinner",require("../assets/Images/Dinner.jpeg")),];