React Native页面顶部插入本地PNG图片失败，求解决方法

直接按以下步骤修改代码即可实现需求，关键是正确引入Image组件和本地图片资源：

核心修改点 #

• 从react-native中导入Image组件
• 正确引入本地PNG图片（注意路径匹配实际存放位置）
• 在页面容器最顶部添加Image并设置合适样式

修改后的完整代码 #

import React, { useState } from "react";
import { Button, TextInput, StyleSheet, Text, View, Image } from "react-native";

// 导入本地煎饼图片，路径根据你的实际存放位置调整
const PancakeImage = require('./assets/images/pancake.png');

const Recipe = ({ navigation }) => {
  const [word, setWord] = useState(" ");
  const [definition, setDefinition] = useState(" ");

  return (
    <View style={styles.container}>
      {/* 页面顶部的煎饼图片 */}
      <Image
        source={PancakeImage}
        style={styles.pancakeImage}
        resizeMode="cover"
        alt="煎饼图片"
      />
      <TextInput placeholder="Ingredients" />
      <TextInput placeholder="1 1/2 cup flour" />
      <TextInput placeholder="3 1/2 teaspoons baking powder" />
      <TextInput placeholder="1 Tablespoon sugar" />
      <TextInput placeholder="pinch salt" />
      <TextInput placeholder="1 1/4 cup milk" />
      <TextInput placeholder="3 tablespoons butter" />
      <TextInput placeholder="1 egg" />
      <TextInput placeholder=" " />
      <TextInput placeholder="Directions:" />
      <TextInput placeholder=" " />
      <TextInput placeholder="Step 1" />
      <TextInput placeholder="Sift flour, baking powder, sugar, and salt together in a" />
      <TextInput placeholder="large bowl. Make a well in the center and add milk," />
      <TextInput placeholder="melted butter, and egg; mix until smooth." />
      <TextInput placeholder=" " />
      <TextInput placeholder="Step 2" />
      <TextInput placeholder="Heat a lightly oiled griddle or pan over medium-high heat." />
      <TextInput placeholder="Pour or scoop the batter onto the griddle, using" />
      <TextInput placeholder="approximately 1/4 cup for each pancake; cook until" />
      <TextInput placeholder="bubbles form and then flip. " />
      <TextInput placeholder=" " />
      <TextInput placeholder="Step 3" />
      <TextInput placeholder="Wait approximately 1 minute and serve with butter" />
      <TextInput placeholder="and warm maple syrup." />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingBottom: 50,
  },
  pancakeImage: {
    width: '100%',
    height: 200,
    marginBottom: 20,
  },
  itemName: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
  itemDesc: {
    padding: 10,
    fontSize: 25,
    height: 44,
  },
  border: {
    borderWidth: 4,
    borderColor: "blue",
  },
});

export default Recipe;

常见问题排查 #

• 路径错误：确认require()里的路径和图片实际位置一致，比如图片在项目根目录就写require('./pancake.png')
• 样式缺失：React Native的Image必须指定width和height才能显示，否则会隐藏
• 格式问题：确保图片是标准PNG格式，文件名无特殊字符或空格

内容的提问来源于stack exchange，提问作者Shan