在Expo/React Native中如何将网络图片作为常量存储？

对于本地图片，你可以通过require()直接把资源存为变量，但网络图片没法用require()（因为require()是打包阶段解析本地资源的工具，网络资源属于运行时加载内容），不过有简单的等效方案满足你的需求：

直接存储图片URL字符串 #

把网络头像的URL存为一个可复用的变量，在需要使用的地方传入Image组件的source即可：

// 定义可复用的头像URL变量
const userProfileImage = 'https://www.images.com/profilePicture.png';

使用时：

import { Image } from 'react-native';

// 在任意组件中引用
<Image 
  source={{ uri: userProfileImage }} 
  style={{ width: 100, height: 100, borderRadius: 50 }} 
/>

React Native的Image组件默认会缓存网络图片，只要URL一致，就不会重复发起请求，完全满足你“只需加载一次”的需求。

封装成组件（可选优化） #

如果想进一步统一头像的样式和使用方式，也可以封装成专用组件，底层还是复用同一个URL变量：

import { Image, StyleSheet } from 'react-native';

const userProfileImage = 'https://www.images.com/profilePicture.png';

const ProfileImage = ({ style }) => {
  return (
    <Image
      source={{ uri: userProfileImage, cache: 'force-cache' }} // 强制启用缓存，强化复用效果
      style={[styles.defaultAvatar, style]}
    />
  );
};

const styles = StyleSheet.create({
  defaultAvatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
    borderWidth: 2,
    borderColor: '#fff'
  }
});

export default ProfileImage;

之后在任意组件里直接用<ProfileImage />，或者自定义样式<ProfileImage style={{ width: 120 }} />即可，既保证了头像资源的复用，也统一了UI风格。

注：如果需要更精细的缓存控制，可以给source加上cache属性，比如cache: 'force-cache'或cache: 'only-if-cached'，适配不同场景。

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