React Native图片画廊：export const与JSON对比及图片存储最佳实践

一、export const 存储作品详情 vs JSON 文件的优势 #

对比你给出的两种存储方式，JS 导出常量有几个实用优势：

• 直接兼容 React Native 资源加载：像示例里的 source: require('../assets/images/art/Charizard.jpg')，JS 文件里可以直接用 require 引入静态资源，Expo/React Native 会自动识别并打包这些资源。而 JSON 文件只能存字符串路径，你还得在组件里额外写 require(item.source) 才能正确加载，多了一步转换逻辑。
• 支持动态逻辑处理：如果以后需要根据环境、用户权限返回不同作品，或者给字段做计算处理，JS 文件里可以直接写逻辑实现，JSON 是纯静态数据，完全做不到这点。
• 类型校验更方便：如果后续改用 TypeScript，你可以给 artwork 数组定义类型，开发时就能提前发现数据结构错误，JSON 没法做静态类型检查。
• 模块化复用性更强：你可以在同一个 JS 文件里导出和作品相关的辅助函数（比如过滤、排序方法），把数据和逻辑放在一起管理，JSON 只能单独存储纯数据。

二、图片存储：打包进项目 vs 上传数据库的最佳实践 #

这得根据你的场景选择：

适合和项目打包的情况（练习/作品集首选） #

如果你的作品集图片数量不多（几十张以内）、单张体积不大（每张几百KB级别），直接把图片放进 assets 目录和项目打包是最优选择：

• 加载速度快，不需要网络就能展示，适合作品集离线演示。
• Expo 会自动帮你优化资源，比如根据设备分辨率生成适配的图片版本，不用自己手动处理。
• 部署简单，打包成 APK/IPA 或者用 Expo Go 预览时，所有资源都在包里，不用依赖外部服务。

适合上传云存储+数据库存URL的情况 #

如果图片数量多、体积大，或者以后需要动态更新作品（比如不用重新发版就能添加新作品），就别把图片打包进项目：

• 大量图片会导致安装包体积暴涨，降低用户下载意愿。
• 把图片上传到云存储（比如 Firebase Storage、阿里云OSS），然后在数据库里存储图片的访问 URL，这样既能减小安装包体积，又能通过后台动态更新作品列表。
• 注意：别把图片文件直接存数据库，数据库存大文件效率极低、成本也高，只存 URL 就足够了。

你的代码示例参考 #

JS 文件存储方式

export const artwork = [
    {   
        id: '1',
        source: require('../assets/images/art/Charizard.jpg'),
        artist: 'Antonio Banderas',
        title: 'Charizard Gigantimax',
        about: 'This is a shiny Charizard that has gigantimaxed in Galar.' 
    }
]

JSON 文件存储方式

[
    {   
        "id": "1",
        "source": "../assets/images/art/Charizard.jpg",
        "artist": "Antonio Banderas",
        "title": "Charizard Gigantimax",
        "about": "This is a shiny Charizard that has gigantimaxed in Galar." 
    }
]

内容的提问来源于stack exchange，提问作者David J Grimsley