React Native(Expo)中图片无法渲染问题求助

你的问题出在传递BoxImage属性的方式上——你把require()调用用单引号包裹成了字符串，导致组件接收到的是普通文本而非有效的图片资源引用，Image组件自然无法渲染图片。

正确的实现方式有两种： #

方式一：直接传递require()调用结果

<HomeScreenBox
  BoxName="Add Marks"
  BoxImage={require("../assets/images/person.jpg")}
/>
const HomeScreenBox = (props) => {
  return (
    <View>
      <Image source={props.BoxImage} />
      <Text>{props.BoxName}</Text>
    </View>
  );
};

方式二：提前导入图片再传递

// 提前导入本地图片资源
import PersonImage from "../assets/images/person.jpg";

<HomeScreenBox
  BoxName="Add Marks"
  BoxImage={PersonImage}
/>
const HomeScreenBox = (props) => {
  return (
    <View>
      <Image source={props.BoxImage} />
      <Text>{props.BoxName}</Text>
    </View>
  );
};

原理说明 #

React Native中require()用于静态加载本地资源，它会返回一个包含资源信息的对象，而非字符串。如果用引号包裹require()语句，传递的就只是一串文本，Image组件无法将其解析为可渲染的图片资源。

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