Library react-native-ui-lib React Native 跨平台 UI 组件与工具集

React Native 开发者经常要为 iOS 和 Android 各自调整样式、配色和间距，缺少一套能统一管理的设计系统。每次新页面都重复写 Colors、Typography、Spacings，时间一长代码里到处是魔法数字。
react-native-ui-lib 由 Wix 团队维护，提供了一整套 UI 组件与设计令牌（design tokens）管理体系。你先 load 一套基础令牌，后续所有组件自动跟随主题，改一处配色全站生效。

项目基本信息

一、项目介绍

react-native-ui-lib（UI Components Library for React Native），React Native 跨平台 UI 组件与工具集。它把相关能力封装成开箱即用的形态，让开发者无需从零搭建即可直接落地，下文从优势、场景到安装使用逐一展开。

二、核心优势

• 内置 Colors、Typography、Spacings 等设计令牌，集中管理主题
• 提供按钮、卡片、列表、表单等常用 RN 组件
• 支持 RN 新架构，覆盖 0.73 及以上版本
• 配套 Figma 设计库与 Expo 演示 App，设计与开发对齐

三、适用场景

• 需要统一视觉规范的 React Native 应用
• 从零搭建产品级 App、希望快速复用的团队
• 已有 RN 项目想引入设计系统做主题化改造

四、安装教程

使用 npm 安装：

npm install react-native-ui-lib

注意该库要求 React Native 0.60.0 及以上；低于该版本的旧工程请使用 react-native-ui-lib@^3.0.0。

常见报错：Unable to resolve module。多为 Metro 缓存未刷新，执行 npx react-native start --reset-cache 重启打包器即可。若使用 6.0 大版本，留意官方列出的 breaking changes，部分组件导入路径有调整。

五、使用示例

先在入口处加载你的设计令牌，组件就会自动套用：

import { Colors, Typography, Spacings } from 'react-native-ui-lib';

Colors.loadColors({
  primaryColor: '#2364AA',
  textColor: '#221D23',
  errorColor: '#E63B2E',
});
Typography.loadTypographies({ heading: { fontSize: 36, fontWeight: '600' } });
Spacings.loadSpacings({ page: 20 });

输入：定义好的品牌色与字体令牌。
输出：后续 <Text heading>标题</Text>、<Button>确认</Button> 等组件自动应用这套主题，无需逐处传样式。

六、常见问题

问：它和 NativeBase、Tamagui 有什么区别？

答：ui-lib 更强调『设计令牌 + 现成组件』的轻量组合，依赖少、上手快，适合想在 RN 里建立自己设计系统的团队。

问：支持 Expo 吗？

答：支持，官方提供 Expo 演示 App，可直接扫码体验组件效果。

七、总结

react-native-ui-lib 用设计令牌把 RN 的主题管理做得很省心，组件覆盖常见场景，适合追求统一风格又不想引入重框架的 RN 团队。