wn-native-ui

v0.1.1

Published

11 days ago

Reusable React Native UI components for Expo projects

0High
0Medium
0Low

yee_ni

react-native expo ui components ui-kit

WN UI

30 组可复用的 React Native 公共组件，提供 TypeScript 类型、统一入口、单组件子路径和默认 UI token。不依赖原项目的路由、接口、登录态或 @/ 路径别名。

包名 wn-native-ui、版本 0.1.0，目前仅用于本地安装，尚未发布到 npm。private: true 防止误发布；UNLICENSED 表示尚未授权公开分发，并非开源许可证。

在其他项目安装

适用于 Expo / React Native 工程，不是普通 React DOM 组件库。本版沿用源项目依赖范围：Expo SDK 56、React 19.2.3、React Native 0.85.3。其他版本需单独验证，不建议使用 --force 跳过依赖冲突。

在已有的兼容 Expo 工程根目录执行：

npx expo install expo-document-picker expo-image expo-image-picker expo-linear-gradient react-native-safe-area-context react-native-svg
npm install "D:/code/compontent/artifacts/wn-native-ui-0.1.0.tgz"

也可将 .tgz 复制到目标项目的 vendor/ 后执行：

npm install ./vendor/wn-native-ui-0.1.0.tgz

推荐安装 tgz，避免本地目录链接导致 React 多实例。不要从公共 npm 仓库直接安装同名包：此包尚未发布，同名包可能属于其他人。

裸 React Native 工程需要先接入 Expo Modules，并安装兼容的原生依赖。iOS 按宿主流程安装 Pods；新增原生模块或更改相机/相册权限后需要重新构建 App。

最小示例

import { View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Button, Toast, ToastProvider } from 'wn-native-ui';

export default function App() {
  return (
    <SafeAreaProvider>
      <ToastProvider>
        <View style={{ flex: 1, justifyContent: 'center', padding: 24 }}>
          <Button onPress={() => Toast.success('保存成功')}>保存</Button>
        </View>
      </ToastProvider>
    </SafeAreaProvider>
  );
}

宿主已有 SafeAreaProvider 时沿用现有 Provider。ToastProvider 全局挂载一次。库不要求使用 Expo Router，路由依赖仅属于展示项目。

统一入口与子路径都可使用：

import { Button, Form, Input, type ButtonProps } from 'wn-native-ui';
import { DatePicker, type DatePickerProps } from 'wn-native-ui/DatePicker';
import { uiTokens } from 'wn-native-ui/tokens';

子路径只公开组件入口，不公开内部实现。单组件导入不意味着可以忽略本版声明的 peerDependencies。

宿主责任与兼容边界

业务数据、接口请求和持久化由宿主提供。
Upload 的 upload 回调由宿主对接真实上传服务；不提供时选择结果保留为待上传。展示页的 simulateUpload 仅供演示。
相机、相册、文件选择依赖 Expo 模块；权限文案、系统授权和原生构建由宿主配置。图片选择器插件配置可参考 example/app.json。
保留原组件默认视觉，可通过已暴露的 style、titleStyle 等属性调整。uiTokens 用于读取默认样式，本版没有运行时主题切换，不应修改 token 对象来切换主题。
默认文案含中文，是否可以覆盖取决于各组件 Props；本版未完成完整国际化。
Web 需要 React Native Web。SSR、Node 服务端直接渲染及纯 React DOM 项目不在验证范围。

Props、事件与示例见组件目录及各组件的 README。

开发和打包

本次工具环境为 Node.js 22.22.0 / npm 10.9.4。

npm ci
npm run format
npm run format:check
npm run typecheck
npm run build
npm run verify:package
npm pack --dry-run

生成安装包：

New-Item -ItemType Directory -Path artifacts -Force
npm pack --pack-destination artifacts

prepack 自动执行类型检查、构建和包入口检查。安装 tgz 不会在使用方执行组件库构建。lib 包含 ES Module 与 .d.ts 声明；运行时依赖由宿主提供，React 没有打进产物。

展示项目

先生成 tgz，再执行：

cd example
npm ci
npm run typecheck
npm run android

macOS / Xcode 环境可运行 npm run ios。npm run web 用于 Web 布局检查，示例固定使用端口 5188，请先确保可用。

示例使用 file:../artifacts/wn-native-ui-0.1.0.tgz 安装真实包，不使用指向库源码的别名。库更新后需要重新打包并更新安装；正式维护时递增版本，同时更新示例的 tgz 路径和锁文件，避免同版本缓存。

src/index.ts               公共包入口
src/components/            30 组组件与文档
src/ui/tokens.ts           默认样式 token
lib/                      自动生成的 JS 与类型声明
example/                  独立 Expo 展示应用
scripts/verify-package.mjs 包入口、路径及依赖检查
artifacts/                npm 安装包
archive/                  原始提取 ZIP、清单、依赖记录和说明

archive 的 SHA-256 清单仅对应原始备份，不对应整理后的文件。example、archive、artifacts、锁文件和开发脚本不随 npm 包分发。

发布准备

发布前确定自己拥有的 npm 包名或 scope、分发范围和许可证，再调整 private、license、包名及示例中的导入路径。本次没有登录或发布到 npm。

构建参考 React Native Builder Bob，打包参考 npm pack。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme