Javascript 错误：undefined不是对象（求值'；style.width'；）

大家好，我的组件出现问题，我收到一条未定义的错误消息。因此，我的应用程序有两个屏幕，第一个屏幕有一个imagebackgrounds列表，当你按下其中一个图像时，你会在另一个屏幕上看到该图像的描述。因此，在第二个屏幕上，我会看到我在图像组件中按下的图像（而不是背景）. 我遇到的问题是，当我保存时，会得到未定义的错误

第一屏组件：

const MealItems=（道具）=>{
返回(
{props.title}
{props.duration}
{props.complexity.toUpperCase（）}
{props.affordability.toUpperCase（）}
);
};
styles=样式表.create({
主要内容：{
身高：200，
宽度：“100%”，
背景颜色：“F5”，
边界半径：20，
溢出：“隐藏”，
玛吉：10，
},
主要标题:{
身高：“85%”，
},
标题：{
尺寸：20，
颜色：“白色”，
textAlign：“居中”，
},
详情：{
flexDirection:“行”，
},
图像背景：{
宽度：“100%”，
高度：“100%”，
},
信息：{
背景颜色：“灰色”，
水平方向：10，
辩护内容：“间隔空间”，
对齐项目：“中心”，
身高：“15%”，
},
文本容器：{
水平方向：12，
填充垂直：10，
背景色：“rgba（0,0,0,0.3）”，
},
});
导出默认度量值；
***第二个屏幕文件：***
const howtook=（道具）=>{
const availableMeals=useSelector（（state）=>state.fines.filteredMeals）；
const mealId=props.navigation.getParam（“mealId”）；
const selectedMeal=availableMeals.find（（膳食）=>mealId==膳食.id）；
返回(
{selectedMeal.duration}
{selectedMeal.complexity.toUpperCase（）}
{selectedMeal.befordability.toUpperCase（）}
成分

您好，欢迎来到stack overflow。如果您想让我们帮助您，请提供我们需要的信息。您有错误吗？向我们显示错误消息。您试图解决问题的原因是什么？什么不起作用？您的程序不完整，请添加更多代码段，如有问题的代码段不使用style.width。要修复错误，您可以使用c检查是否定义了style.width。显然，您使用的是style.width，但使用的是style.width。因此，请检查它是styles.width还是style.width。感谢您的回答。问题来自expo生成的节点模块。请查找expo正在使用的代码。代码：如果可能，我想要一点c向你致敬，这样我才能详细解释。我真的需要一些帮助。-罗希特。

const MealItems = (props) => {
  return (
    <View style={styles.main}>
      <TouchableOpacity onPress={props.onSelectMeal}>
        <View>
          <View style={{ ...styles.details, ...styles.maintitle }}>
            <ImageBackground
              //resizeMode={"center"}
              source={{ uri: props.image }}
              style={styles.imagebg}
            >
              <View style={styles.textContainer}>
                <Text style={styles.title} numberOfLines={1}>
                  {props.title}
                </Text>
              </View>
            </ImageBackground>
          </View>

          <View style={{ ...styles.details, ...styles.info }}>
            <Text>{props.duration}</Text>
            <Text>{props.complexity.toUpperCase()}</Text>
            <Text>{props.affordability.toUpperCase()}</Text>
          </View>
        </View>
      </TouchableOpacity>
    </View>
  );
};

styles = StyleSheet.create({
  main: {
    height: 200,
    width: "100%",
    backgroundColor: "#f5f5f5",
    borderRadius: 20,
    overflow: "hidden",
    marginVertical: 10,
  },

  maintitle: {
    height: "85%",
  },
  title: {
    fontSize: 20,
    color: "white",
    textAlign: "center",
  },
  details: {
    flexDirection: "row",
  },
  imagebg: {
    width: "100%",
    height: "100%",
  },
  info: {
    backgroundColor: "gray",
    paddingHorizontal: 10,
    justifyContent: "space-between",
    alignItems: "center",
    height: "15%",
  },
  textContainer: {
    paddingHorizontal: 12,
    paddingVertical: 10,
    backgroundColor: "rgba(0,0,0,0.3)",
  },
});

export default MealItems;

***Second screen file:***
const howToCook = (props) => {
  const availableMeals = useSelector((state) => state.Meals.filteredMeals);
  const mealId = props.navigation.getParam("mealId");
  const selectedMeal = availableMeals.find((meal) => mealId === meal.id);

  return (
    <ScrollView>
      <Image source={{ uri: selectedMeal.imageUrl }} style={styles.image} />
      <View style={styles.textDetail}>
        <Text>{selectedMeal.duration}</Text>
        <Text>{selectedMeal.complexity.toUpperCase()}</Text>
        <Text>{selectedMeal.affordability.toUpperCase()}</Text>
      </View>
      <View style={styles.titlePlace}>
        <Text style={styles.textTitle}>Ingredients</Text>
      </View>