如何在React与React Native中复用现有Amplify后端并减少重复代码

完全可以将 Amplify 相关逻辑抽离为独立公共项目供两个前端调用，这是多端项目降低重复代码的常规实践，已有大量开发者在生产环境落地使用。

可抽离的公共内容范围 #

所有和平台无关的 Amplify 逻辑都可以统一封装在公共包内，典型可复用内容包括：

• 统一的 Amplify 初始化逻辑：将 Amplify.configure(awsconfig) 逻辑和多环境配置封装，避免两端重复维护配置项
• 通用 API 调用封装：GraphQL/REST 接口的增删改查逻辑、参数校验、统一错误处理、日志上报等
• 鉴权相关通用逻辑：登录、注册、Token 刷新、权限校验等跨端逻辑完全一致，无需重复开发
• TypeScript 类型定义：从 Amplify Schema 生成的接口类型、入参出参类型可以统一维护，保证两端类型对齐

落地注意事项 #

实际使用时需要注意几个常见坑点：

• 做好平台差异适配：少部分 Amplify 能力存在平台差异，比如 React Native 端的 Storage 调用原生存储，Web 端调用浏览器存储，这类差异可以在公共包内做适配层，对外暴露统一调用接口，两端无需感知底层差异
• 依赖版本对齐：两个前端项目中安装的 aws-amplify 相关依赖版本，需要和公共包依赖的版本保持一致，避免出现兼容问题
• 构建产物适配：公共包需要同时输出 ES Module 和 CommonJS 两种格式，分别适配 Web 端构建工具和 React Native 的 Metro 打包器
• 环境配置隔离：公共包内要区分 dev、test、prod 等不同环境的 Amplify 配置，不要硬编码配置项

示例代码 #

公共包核心逻辑示例：

// amplify-common 公共包入口文件
import { Amplify } from 'aws-amplify';
import { getEnvConfig } from './config';

// 对外暴露统一初始化方法
export const initAmplify = (env = 'prod') => {
  const amplifyConfig = getEnvConfig(env);
  Amplify.configure(amplifyConfig);
};

// 统一封装 GraphQL 调用方法
export const requestGraphQL = async (query, variables) => {
  try {
    const response = await Amplify.API.graphql({ query, variables });
    return response.data;
  } catch (error) {
    // 统一错误处理逻辑：日志上报、权限过期自动跳转等
    console.error('GraphQL request error:', error);
    throw error;
  }
};

两端项目只需要安装公共包，调用初始化方法后即可直接使用封装好的能力，无需单独维护 Amplify 相关逻辑。

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