如何通过设计系统在ReactJS与React Native间复用通用组件

完全可以实现，目前行业内已有成熟落地路径，核心是把设计规则、组件逻辑和平台渲染层做拆分，不需要强行追求单套代码跑所有端，就能保证两个应用的样式、交互完全对齐设计规范。

具体落地步骤 #

• 先抽离无平台依赖的设计核心层
  这部分内容不依赖Web DOM或者React Native运行时，100%可跨端复用：包含所有设计Token（主辅色、字号、间距、圆角、阴影、动效时长等常量值）、统一的TS类型定义（比如按钮的形态、尺寸枚举，表单字段的校验规则类型）、纯逻辑工具函数（表单校验逻辑、日期格式化、图标名映射表等），直接打包成独立的TS包即可供两端引用。
• 选择适配模式搭建组件实现层
  目前主流有两种可落地的模式，根据团队技术储备选择即可：
  第一种是Monorepo多包架构（推荐）
  用pnpm workspace、Turborepo这类Monorepo工具管理整个组件库仓库，拆分为三个独立发布的包：
  1. 核心包：承载前面提到的设计Token、类型、纯逻辑，无任何平台依赖
  2. Web端组件包：依赖核心包，基于React DOM实现按钮、表单字段、标签、小部件等所有组件，样式可以用CSS Modules、Tailwind、styled-components等任意你熟悉的方案，所有样式值直接引用核心包的设计Token，保证和规范对齐
  3. RN端组件包：同样依赖核心包，基于React Native自带的View、Text、TextInput等基础组件实现和Web端功能一一对应的组件，样式用RN自带的StyleSheet或者NativeWind实现，样式值同样引用核心包的Token
     这种模式的优势是两端组件API可以做到完全一致，业务侧调用时除了引入路径不同，组件属性、写法几乎没有区别，排查问题也没有跨端框架的黑盒阻碍，是目前中大型团队用的最多的方案。
     第二种是同构跨端组件方案
     如果团队不想维护两套组件实现，可以基于自带同构渲染能力的组件库做二次封装，把自身设计规范套入即可，一套组件代码可以同时编译到Web、iOS、Android三端。注意这种方案需要提前验证复杂表单、自定义手势等特殊场景的兼容性，避免遇到跨端框架的底层坑。
• 对齐组件API契约
  无论选哪种模式，必须保证同功能组件的属性定义完全统一：比如按钮组件的variant属性在两端都固定为primary/secondary/danger三个可选值，size属性都为sm/md/lg，事件回调的参数格式完全一致，做到业务侧切换端时，除了组件引入路径不需要修改任何调用代码，甚至可以通过构建配置的路径别名把引入路径也做统一。
• 统一静态资源处理规则
  图标、插画这类公共资源不要两端单独存放，全部放在核心包统一管理：Web端直接将SVG转为React组件渲染，RN端用react-native-svg做适配层自动转换SVG为RN可渲染组件，保证资源的命名、尺寸、颜色适配规则完全一致。

常见避坑点 #

• 不要强行追求100%代码复用：Web端的hover交互、RN端的原生触摸反馈这类平台特有的体验，要放在平台适配层单独实现，不要为了复用代码砍掉符合用户习惯的原生交互。
• 组件库做同步版本发布：核心包更新时，Web和RN端的组件包要同步升级对应版本号，避免两端依赖的Token版本不一致导致样式错位。
• 公共组件不要耦合业务逻辑：组件库只承载设计规范和通用交互逻辑，和具体业务绑定的接口请求、特殊校验规则等内容要放在业务应用内实现，不要污染公共组件。

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