vonxq-expo-common-kit

Expo/React Native 通用组件库，包含常用 UI 组件和同步功能。

安装

npm install vonxq-expo-common-kit

安装对等依赖

npx expo install expo-file-system expo-image-picker expo-haptics expo-document-picker expo-sharing @expo/vector-icons react-native-reanimated react-native-gesture-handler @react-native-async-storage/async-storage

组件

Modal

通用弹窗组件：

import { Modal } from 'vonxq-expo-common-kit';

<Modal visible={visible} onClose={() => setVisible(false)}>
  <Text>弹窗内容</Text>
</Modal>

ProgressModal

进度弹窗组件：

import { ProgressModal } from 'vonxq-expo-common-kit';

<ProgressModal
  visible={loading}
  title="备份中"
  message="正在上传数据..."
  progress={50}
/>

UniversalInput

通用输入组件，支持多行输入和图片选择：

import { UniversalInput } from 'vonxq-expo-common-kit';

<UniversalInput
  placeholder="写点什么..."
  onSubmit={(text, images) => console.log(text, images)}
  showImagePicker
/>

ImagePickerComponent

图片选择器：

import { ImagePickerComponent } from 'vonxq-expo-common-kit';

<ImagePickerComponent
  images={images}
  onImagesChange={setImages}
  maxImages={9}
/>

ImageViewer

全屏图片查看器：

import { ImageViewer } from 'vonxq-expo-common-kit';

<ImageViewer
  visible={visible}
  images={images}
  initialIndex={0}
  onClose={() => setVisible(false)}
/>

ImageGrid

图片网格展示：

import { ImageGrid } from 'vonxq-expo-common-kit';

<ImageGrid
  images={images}
  onPress={(index) => console.log(index)}
/>

同步功能

SyncManager

统一管理数据备份和恢复：

import { SyncManager } from 'vonxq-expo-common-kit';

const syncManager = new SyncManager({
  iCloudContainer: 'iCloud~com~yourapp~id',
  localFileName: 'your-app-backup.json',
});

// 加载配置
await syncManager.loadConfigs();

// 启用平台
await syncManager.updateConfig('local', { enabled: true });

// 备份
await syncManager.syncTo('local', yourAppData, (progress) => {
  console.log(`备份进度: ${progress}%`);
});

// 恢复
const snapshot = await syncManager.restoreFrom('local', (progress) => {
  console.log(`恢复进度: ${progress}%`);
});

iCloud 配置

在 app.json 中添加：

{
  "expo": {
    "ios": {
      "bundleIdentifier": "com.yourapp.id",
      "usesIcloudStorage": true,
      "infoPlist": {
        "NSUbiquitousContainers": {
          "iCloud.com.yourapp.id": {
            "NSUbiquitousContainerIsDocumentScopePublic": true,
            "NSUbiquitousContainerName": "YourAppName",
            "NSUbiquitousContainerSupportedFolderLevels": "Any"
          }
        }
      }
    }
  }
}

主题

组件使用内置主题，可以通过 setTheme 自定义：

import { setTheme } from 'vonxq-expo-common-kit';

setTheme({
  colors: {
    primary: '#00BCD4',
    background: '#121212',
  },
});

License

MIT