react-native-fxview 1.0.1 → 1.0.2-beta12

package/README.md

@@ -1,16 +1,25 @@
 # React Native FXView
 
-一个用于React Native的动态视图组件，支持运行时UI更新和组件管理。
+一个革命性的React Native动态UI预埋框架，支持在任何位置预埋容器，然后通过全局管理器在运行时动态注入和控制React组件。
 
-## 功能特性
+## 🎯 核心概念
 
-- 🎯 动态组件管理
-- 🔄 运行时UI更新
-- 📂 组件分类管理
-- 👁️ 组件显示/隐藏控制
-- 🚀 轻量级和高性能
+FXView采用**预埋+注入**的设计模式：
 
-## 安装
+1. **预埋容器**：在应用的任何位置预埋`FXView`容器
+2. **动态注入**：通过`FXViewManager`在任何时间、任何位置动态注入React组件
+3. **全局控制**：支持跨组件、跨页面的全局UI管理和状态控制
+
+## ✨ 功能特性
+
+- 🎯 **动态组件注入** - 运行时在任何预埋位置注入React组件
+- 🔄 **实时UI更新** - 支持组件内容的实时更新和状态管理
+- 📂 **智能分类管理** - 按分类组织和管理动态组件
+- 👁️ **显示/隐藏控制** - 灵活控制组件的显示状态
+- 🌍 **全局访问** - 从应用的任何地方访问和管理UI
+- 🚀 **轻量级高性能** - 优化的渲染性能和内存管理
+
+## 📦 安装
 
 ```bash
 npm install react-native-fxview
@@ -18,44 +27,183 @@ npm install react-native-fxview
 yarn add react-native-fxview
 ```
 
-## 快速开始
+## 🚀 快速开始
+
+### 1. 预埋FXView容器
+
+在任何需要动态注入UI的位置预埋FXView：
 
 ```javascript
 import React from 'react';
-import { Text } from 'react-native';
+import { View, Text } from 'react-native';
 import { FXView } from 'react-native-fxview';
 
 export default function App() {
   return (
-    <FXView fxViewId="myView">
-      <Text>Hello World</Text>
-    </FXView>
+    <View style={{ flex: 1 }}>
+      <Text>静态内容</Text>
+      
+      {/* 预埋动态UI容器 */}
+      <FXView fxViewId="headerArea" style={{ height: 60 }} />
+      
+      <Text>更多静态内容</Text>
+      
+      {/* 在底部预埋另一个容器 */}
+      <FXView fxViewId="bottomSheet" style={{ position: 'absolute', bottom: 0 }} />
+    </View>
   );
 }
 ```
 
-## API 文档
+### 2. 动态注入组件
+
+从应用的任何地方（甚至不同的页面或组件）动态注入UI：
+
+```javascript
+import { FXViewManager } from 'react-native-fxview';
+import { Button, View, Text } from 'react-native';
+
+// 在headerArea注入一个搜索栏
+const searchBarController = FXViewManager.getInstance().add(
+  <View style={{ backgroundColor: '#f0f0f0', padding: 10 }}>
+    <Text>搜索栏组件</Text>
+  </View>,
+  'headerArea',  // fxViewId
+  'navigation'   // categoryId
+);
+
+// 在bottomSheet注入一个弹窗
+const sheetController = FXViewManager.getInstance().add(
+  <View style={{ backgroundColor: 'white', padding: 20, borderRadius: 10 }}>
+    <Text>底部弹窗内容</Text>
+    <Button title="关闭" onPress={() => sheetController.hide()} />
+  </View>,
+  'bottomSheet',
+  'modals'
+);
+```
+
+### 3. 运行时控制
+
+```javascript
+// 隐藏搜索栏
+searchBarController.hide();
+
+// 更新搜索栏内容
+searchBarController.update(
+  <View style={{ backgroundColor: 'blue', padding: 10 }}>
+    <Text style={{ color: 'white' }}>更新后的搜索栏</Text>
+  </View>
+);
+
+// 显示搜索栏
+searchBarController.show();
+
+// 完全移除组件
+searchBarController.remove();
+```
+
+## 📖 API 参考
 
 ### FXView Props
 
-- `fxViewId` (string, optional): 视图唯一标识符，如果不提供则自动生成
+- `fxViewId` (string, optional): 容器唯一标识符，用于后续注入组件时的定位
+
+### FXViewManager 主要方法
+
+#### 组件管理
+- `add(component, fxViewId?, category?, componentId?)` - 创建并显示组件
+- `build(component, fxViewId?, category?, componentId?)` - 创建但不显示组件
+- `show(componentId, fxViewId?, category?)` - 显示已存在的组件
+- `hide(componentId, fxViewId?, category?)` - 隐藏组件
+- `update(componentId, newComponent, fxViewId?, category?)` - 更新组件内容
+- `remove(componentId, fxViewId?, category?)` - 移除组件
+
+#### 批量操作
+- `clearAll(fxViewId?)` - 清空指定或所有容器
+- `clearCategory(categoryId, fxViewId?)` - 清空指定分类
+
+#### 查询方法
+- `getComponents(fxViewId?, category?)` - 获取组件列表
+- `hasComponent(componentId, fxViewId?, category?)` - 检查组件是否存在
+- `isComponentVisible(componentId, fxViewId?, category?)` - 检查组件是否可见
 
-### FXViewManager
+### 组件控制器 (FXComponentController)
 
-用于管理所有FXView实例的全局管理器。
+- `show()` - 显示组件
+- `hide()` - 隐藏组件
+- `remove()` - 移除组件
+- `update(newComponent)` - 更新组件内容
+- `isVisible()` - 获取可见状态
+- `exists()` - 检查组件是否存在
 
-### FXViewController
+## 💡 使用场景
 
-用于控制单个组件的控制器。
+### 1. 动态导航栏
+在不同页面根据状态动态改变顶部导航栏内容
 
-### FXViewCategoryController
+### 2. 全局弹窗系统
+从任何地方触发全局弹窗、通知、确认框等
 
-用于控制组件分类的控制器。
+### 3. 动态表单
+根据用户操作动态添加、移除、更新表单字段
 
-## 示例
+### 4. 插件化UI
+支持第三方插件动态注入UI组件到主应用
 
-查看项目中的示例代码了解更多用法。
+### 5. A/B测试
+动态切换不同的UI组件进行A/B测试
+
+## 🎯 最佳实践
+
+### 分类管理
+使用分类来组织不同类型的动态组件：
+
+```javascript
+// 导航相关
+FXViewManager.getInstance().add(navComponent, 'header', 'navigation');
+
+// 弹窗相关
+FXViewManager.getInstance().add(modalComponent, 'overlay', 'modals');
+
+// 通知相关
+FXViewManager.getInstance().add(toastComponent, 'notification', 'notifications');
+```
+
+### 生命周期管理
+```javascript
+// 创建时
+const controller = FXViewManager.getInstance().build(component, 'container');
+
+// 需要时显示
+controller.show();
+
+// 不需要时隐藏
+controller.hide();
+
+// 完全清理
+controller.remove();
+```
+
+## 🔧 高级用法
+
+### 生命周期回调
+```javascript
+FXViewManager.getInstance().registerLifecycleCallbacks({
+  didMount: (fxViewId) => console.log('FXView挂载:', fxViewId),
+  willUnmount: (fxViewId) => console.log('FXView卸载:', fxViewId)
+});
+```
+
+### 组件查询和批量操作
+```javascript
+// 获取所有导航组件
+const navComponents = FXViewManager.getInstance().getComponents(null, 'navigation');
+
+// 清空所有弹窗
+FXViewManager.getInstance().clearCategory('modals');
+```
 
-## 许可证
+## 📄 许可证
 
-MIT
+MIT

package/index.d.ts

@@ -1,5 +1,5 @@
 export { default as FXView } from "./FXView";
 export { FXViewManager } from "./FXViewManager";
 export { FXViewController } from "./FXViewController";
-export { FXViewCategoryController } from "./FXViewCategoryController";
+export { FXCategoryController } from "./FXCategoryController";
 export * from "./types";

package/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FXViewCategoryController = exports.FXViewController = exports.FXViewManager = exports.FXView = void 0;
+exports.FXCategoryController = exports.FXViewController = exports.FXViewManager = exports.FXView = void 0;
 // 主入口文件
 var FXView_1 = require("./FXView");
 Object.defineProperty(exports, "FXView", { enumerable: true, get: function () { return __importDefault(FXView_1).default; } });
@@ -25,6 +25,6 @@ var FXViewManager_1 = require("./FXViewManager");
 Object.defineProperty(exports, "FXViewManager", { enumerable: true, get: function () { return FXViewManager_1.FXViewManager; } });
 var FXViewController_1 = require("./FXViewController");
 Object.defineProperty(exports, "FXViewController", { enumerable: true, get: function () { return FXViewController_1.FXViewController; } });
-var FXViewCategoryController_1 = require("./FXViewCategoryController");
-Object.defineProperty(exports, "FXViewCategoryController", { enumerable: true, get: function () { return FXViewCategoryController_1.FXViewCategoryController; } });
+var FXCategoryController_1 = require("./FXCategoryController");
+Object.defineProperty(exports, "FXCategoryController", { enumerable: true, get: function () { return FXCategoryController_1.FXCategoryController; } });
 __exportStar(require("./types"), exports);

package/index.ts

@@ -2,5 +2,5 @@
 export { default as FXView } from "./FXView";
 export { FXViewManager } from "./FXViewManager";
 export { FXViewController } from "./FXViewController";
-export { FXViewCategoryController } from "./FXViewCategoryController";
+export { FXCategoryController } from "./FXCategoryController";
 export * from "./types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-fxview",
-  "version": "1.0.1",
+  "version": "1.0.2-beta12",
   "description": "A dynamic view component for React Native that allows runtime UI updates and component management",
   "main": "index.ts",
   "types": "index.d.ts",
@@ -8,6 +8,10 @@
     "*.js",
     "*.ts",
     "*.tsx",
+    "*.d.ts",
+    "queue/**/*.js",
+    "queue/**/*.ts",
+    "queue/**/*.d.ts",
     "README.md",
     "LICENSE"
   ],

package/queue/PriorityQueue.d.ts

@@ -0,0 +1,153 @@
+/**
+ * 通用的优先级队列 - 支持泛型存储，可切换大顶堆/小顶堆模式
+ * 支持优先级相同时的排序策略：先入先出(FIFO)或后入先出(LIFO)
+ */
+export declare enum HeapType {
+    MAX_HEAP = "max",// 大顶堆：优先级高的在前
+    MIN_HEAP = "min"
+}
+export declare enum PriorityOrder {
+    FIFO = "fifo",// 先入先出：优先级相同时，先入队的在前
+    LIFO = "lifo"
+}
+export declare class PriorityQueue<T> {
+    private items;
+    private heapType;
+    private priorityOrder;
+    constructor(heapType?: HeapType, priorityOrder?: PriorityOrder);
+    /**
+     * 设置堆类型（可选参数）
+     */
+    setHeapType(heapType?: HeapType): void;
+    /**
+     * 获取当前堆类型
+     */
+    getHeapType(): HeapType;
+    /**
+     * 设置优先级相同时的排序策略（可选参数）
+     */
+    setPriorityOrder(order?: PriorityOrder): void;
+    /**
+     * 获取当前优先级相同时的排序策略
+     */
+    getPriorityOrder(): PriorityOrder;
+    /**
+     * 入队 - 按当前堆类型和排序策略排序
+     */
+    enqueue(item: T, priority?: number, timestamp?: number): void;
+    /**
+     * 批量入队（可选参数）
+     */
+    enqueueMultiple(items: T[], priority?: number): void;
+    /**
+     * 出队 - 返回队首元素（最高或最低优先级）
+     */
+    dequeue(): T | null;
+    /**
+     * 批量出队（可选参数）
+     */
+    dequeueMultiple(count?: number): T[];
+    /**
+     * 查看队首元素（不移除）
+     */
+    peek(): T | null;
+    /**
+     * 查看队首元素的优先级
+     */
+    peekPriority(): number | null;
+    /**
+     * 查看前N个元素（可选参数）
+     */
+    peekMultiple(count?: number): T[];
+    /**
+     * 队列是否为空
+     */
+    isEmpty(): boolean;
+    /**
+     * 队列大小
+     */
+    size(): number;
+    /**
+     * 清空队列
+     */
+    clear(): void;
+    /**
+     * 获取所有元素（按当前堆类型排序）
+     */
+    getAll(): T[];
+    /**
+     * 获取所有元素及其优先级
+     */
+    getAllWithPriority(): Array<{
+        item: T;
+        priority: number;
+    }>;
+    /**
+     * 获取所有元素及其详细信息
+     */
+    getAllWithDetails(): Array<{
+        item: T;
+        priority: number;
+        timestamp: number;
+    }>;
+    /**
+     * 获取指定索引的元素（可选参数）
+     */
+    getAt(index?: number): T | null;
+    /**
+     * 获取指定范��的元素（可选参数）
+     */
+    getRange(start?: number, end?: number): T[];
+    /**
+     * 移除指定元素
+     */
+    remove(item: T): boolean;
+    /**
+     * 移除指定索引的元素（可选参数）
+     */
+    removeAt(index?: number): T | null;
+    /**
+     * 更新元素的优先级
+     */
+    updatePriority(item: T, newPriority?: number): boolean;
+    /**
+     * 查找指定元素
+     */
+    find(predicate: (item: T) => boolean): T | null;
+    /**
+     * 查找所有符合条件的元素
+     */
+    findAll(predicate: (item: T) => boolean): T[];
+    /**
+     * 过滤元素
+     */
+    filter(predicate: (item: T) => boolean): T[];
+    /**
+     * 遍历元素
+     */
+    forEach(callback: (item: T, priority: number, index: number) => void): void;
+    /**
+     * 映射元素
+     */
+    map<U>(callback: (item: T, priority: number, index: number) => U): U[];
+    /**
+     * 判断是否应该插入到指定元素之前
+     */
+    private shouldInsertBefore;
+    /**
+     * 重新排序所有元素
+     */
+    private resort;
+    /**
+     * 转换为数组
+     */
+    toArray(): T[];
+    /**
+     * 转换为JSON字符串
+     */
+    toJSON(): string;
+    /**
+     * 克隆队列
+     */
+    clone(): PriorityQueue<T>;
+}