react-native-fxview 1.0.1 → 1.0.2-beta1

package/{FXViewCategoryController.d.ts → FXCategoryController.d.ts}

@@ -1,6 +1,6 @@
 import React from "react";
-import { ComponentItem, ComponentController } from "./types";
-export declare class FXViewCategoryController {
+import { FXComponentItem, FXComponentController } from "./types";
+export declare class FXCategoryController {
     fxViewId: string;
     categoryId: string;
     private updateCallback?;
@@ -13,14 +13,14 @@ export declare class FXViewCategoryController {
      * @param componentId 可选的组件 ID
      * @returns 组件控制器
      */
-    add(component: React.ReactNode, componentId?: string): ComponentController;
+    add(component: React.ReactNode, componentId?: string): FXComponentController;
     /**
      * 创建但不显示组件
      * @param component 要创建的组件
      * @param componentId 可选的组件 ID
      * @returns 组件控制器
      */
-    build(component: React.ReactNode, componentId?: string): ComponentController;
+    build(component: React.ReactNode, componentId?: string): FXComponentController;
     /**
      * 显示已存在的组件
      * @param componentId 组件 ID
@@ -59,7 +59,7 @@ export declare class FXViewCategoryController {
      * 获取组件列表
      * @returns 组件列表
      */
-    getComponents(): ComponentItem[];
+    getComponents(): FXComponentItem[];
     /**
      * 获取组件数量
      * @returns 组件数量

package/{FXViewCategoryController.js → FXCategoryController.js}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FXViewCategoryController = void 0;
+exports.FXCategoryController = void 0;
 const PriorityQueue_1 = require("./queue/PriorityQueue");
-class FXViewCategoryController {
+class FXCategoryController {
     constructor(fxViewId, categoryId, triggerUpdate) {
         // 存储组件的 Map 和优先队列
         this.componentMap = new Map();
@@ -267,4 +267,4 @@ class FXViewCategoryController {
             .substring(2, 9)}`;
     }
 }
-exports.FXViewCategoryController = FXViewCategoryController;
+exports.FXCategoryController = FXCategoryController;

package/{FXViewCategoryController.ts → FXCategoryController.ts}

@@ -1,15 +1,15 @@
 import React from "react";
-import { ComponentItem, ComponentController } from "./types";
+import { FXComponentItem, FXComponentController } from "./types";
 import { HeapType, PriorityOrder, PriorityQueue } from "./queue/PriorityQueue";
 
-export class FXViewCategoryController {
+export class FXCategoryController {
   public fxViewId: string;
   public categoryId: string;
   private updateCallback?: () => void;
 
   // 存储组件的 Map 和优先队列
-  private componentMap: Map<string, ComponentItem> = new Map();
-  private componentQueue: PriorityQueue<ComponentItem> = new PriorityQueue(
+  private componentMap: Map<string, FXComponentItem> = new Map();
+  private componentQueue: PriorityQueue<FXComponentItem> = new PriorityQueue(
     HeapType.MAX_HEAP,
     PriorityOrder.FIFO,
   );
@@ -32,7 +32,7 @@ export class FXViewCategoryController {
    * @param componentId 可选的组件 ID
    * @returns 组件控制器
    */
-  add(component: React.ReactNode, componentId?: string): ComponentController {
+  add(component: React.ReactNode, componentId?: string): FXComponentController {
     console.log(
       `FXViewCategoryController.add`,
       `[${this.categoryId}]`,
@@ -49,7 +49,7 @@ export class FXViewCategoryController {
       this.remove(finalComponentId);
     }
 
-    const componentItem: ComponentItem = {
+    const componentItem: FXComponentItem = {
       componentId: finalComponentId,
       component,
       visible: true, // add 方法默认可见
@@ -68,7 +68,10 @@ export class FXViewCategoryController {
    * @param componentId 可选的组件 ID
    * @returns 组件控制器
    */
-  build(component: React.ReactNode, componentId?: string): ComponentController {
+  build(
+    component: React.ReactNode,
+    componentId?: string,
+  ): FXComponentController {
     console.log(
       `FXViewCategoryController.build`,
       `[${this.categoryId}]`,
@@ -85,7 +88,7 @@ export class FXViewCategoryController {
       this.remove(finalComponentId);
     }
 
-    const componentItem: ComponentItem = {
+    const componentItem: FXComponentItem = {
       componentId: finalComponentId,
       component,
       visible: false, // build 方法默认不可见
@@ -270,7 +273,7 @@ export class FXViewCategoryController {
    * 获取组件列表
    * @returns 组件列表
    */
-  getComponents(): ComponentItem[] {
+  getComponents(): FXComponentItem[] {
     return this.componentQueue.getAll();
   }
 
@@ -331,7 +334,7 @@ export class FXViewCategoryController {
    * @param componentId 组件 ID
    * @returns 组件控制器
    */
-  private createController(componentId: string): ComponentController {
+  private createController(componentId: string): FXComponentController {
     console.log(
       `FXViewCategoryController.createController`,
       `[${this.categoryId}]`,

package/FXView.d.ts

@@ -1,11 +1,11 @@
 import React, { Component } from "react";
 import { ViewProps } from "react-native";
-import { ComponentItem } from "./types";
+import { FXComponentItem } from "./types";
 interface FXViewProps extends ViewProps {
     fxViewId?: string;
 }
 interface FXViewState {
-    components: ComponentItem[];
+    components: FXComponentItem[];
 }
 export default class FXView extends Component<FXViewProps, FXViewState> {
     state: FXViewState;

package/FXView.js

@@ -74,6 +74,7 @@ class FXView extends react_1.Component {
         const newViewId = this.props.fxViewId || this.viewId;
         if (newViewId !== this.viewId) {
             // ID 变化时重新注册
+            console.log("FXView updated changed", this.viewId);
             FXViewManager_1.FXViewManager.getInstance().unregisterView(this.viewId);
             this.viewId = newViewId;
             FXViewManager_1.FXViewManager.getInstance().registerView(this.viewId, this.updateComponents);

package/FXView.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { View, ViewProps } from "react-native";
-import { ComponentItem } from "./types";
+import { FXComponentItem } from "./types";
 import { FXViewManager } from "./FXViewManager";
 
 interface FXViewProps extends ViewProps {
@@ -8,7 +8,7 @@ interface FXViewProps extends ViewProps {
 }
 
 interface FXViewState {
-  components: ComponentItem[];
+  components: FXComponentItem[];
 }
 
 export default class FXView extends Component<FXViewProps, FXViewState> {
@@ -43,8 +43,8 @@ export default class FXView extends Component<FXViewProps, FXViewState> {
 
     if (newViewId !== this.viewId) {
       // ID 变化时重新注册
+      console.log("FXView updated changed", this.viewId);
       FXViewManager.getInstance().unregisterView(this.viewId);
-
       this.viewId = newViewId;
 
       FXViewManager.getInstance().registerView(

package/FXViewController.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentController, ComponentItem } from "./types";
+import { FXComponentController, FXComponentItem } from "./types";
 export declare class FXViewController {
     fxViewId: string;
     updateCallback?: () => void;
@@ -12,7 +12,7 @@ export declare class FXViewController {
      * @param componentId 组件 ID（可选，自动生成）
      * @returns 组件控制器
      */
-    add(component: React.ReactNode, categoryId?: string, componentId?: string): ComponentController;
+    add(component: React.ReactNode, categoryId?: string, componentId?: string): FXComponentController;
     /**
      * 创建但不显示组件
      * @param component 组件内容
@@ -20,7 +20,7 @@ export declare class FXViewController {
      * @param componentId 组件 ID（可选，自动生成）
      * @returns 组件控制器
      */
-    build(component: React.ReactNode, categoryId?: string, componentId?: string): ComponentController;
+    build(component: React.ReactNode, categoryId?: string, componentId?: string): FXComponentController;
     /**
      * 显示已存在的组件
      * @param componentId 组件 ID
@@ -70,7 +70,7 @@ export declare class FXViewController {
      * @param filterOptions 过滤选项
      * @returns 组件列表
      */
-    getComponents(categoryId?: string): ComponentItem[];
+    getComponents(categoryId?: string): FXComponentItem[];
     /**
      * 获取总组件数量
      * @returns 组件数量

package/FXViewController.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FXViewController = void 0;
-const FXViewCategoryController_1 = require("./FXViewCategoryController");
+const FXCategoryController_1 = require("./FXCategoryController");
 class FXViewController {
     constructor(fxViewId) {
         // 存储各分类的控制器
@@ -140,6 +140,7 @@ class FXViewController {
             controller.clearAll();
         });
         this.categoryControllerMap.clear();
+        console.log("FXViewController.clearAll done", this.categoryControllerMap.size);
     }
     /**
      * 清空指定分类的所有组件
@@ -268,7 +269,7 @@ class FXViewController {
         const finalCategoryId = categoryId || "default";
         let categoryController = this.categoryControllerMap.get(finalCategoryId);
         if (!categoryController) {
-            categoryController = new FXViewCategoryController_1.FXViewCategoryController(this.fxViewId, finalCategoryId, this.updateCallback);
+            categoryController = new FXCategoryController_1.FXCategoryController(this.fxViewId, finalCategoryId, this.updateCallback);
             this.categoryControllerMap.set(finalCategoryId, categoryController);
         }
         return categoryController;

package/FXViewController.ts

@@ -1,14 +1,13 @@
 import React from "react";
-import { ComponentController, ComponentItem } from "./types";
-import { FXViewCategoryController } from "./FXViewCategoryController";
+import { FXComponentController, FXComponentItem } from "./types";
+import { FXCategoryController } from "./FXCategoryController";
 
 export class FXViewController {
   public fxViewId: string;
   public updateCallback?: () => void;
 
   // 存储各分类的控制器
-  private categoryControllerMap: Map<string, FXViewCategoryController> =
-    new Map();
+  private categoryControllerMap: Map<string, FXCategoryController> = new Map();
 
   constructor(fxViewId: string) {
     this.fxViewId = fxViewId;
@@ -27,7 +26,7 @@ export class FXViewController {
     component: React.ReactNode,
     categoryId?: string,
     componentId?: string,
-  ): ComponentController {
+  ): FXComponentController {
     console.log("FXViewController.add", `[${this.fxViewId}]`, {
       categoryId,
       componentId,
@@ -48,7 +47,7 @@ export class FXViewController {
     component: React.ReactNode,
     categoryId?: string,
     componentId?: string,
-  ): ComponentController {
+  ): FXComponentController {
     console.log("FXViewController.build", `[${this.fxViewId}]`, {
       categoryId,
       componentId,
@@ -191,6 +190,10 @@ export class FXViewController {
       controller.clearAll();
     });
     this.categoryControllerMap.clear();
+    console.log(
+      "FXViewController.clearAll done",
+      this.categoryControllerMap.size,
+    );
   }
 
   /**
@@ -233,8 +236,8 @@ export class FXViewController {
    * @param filterOptions 过滤选项
    * @returns 组件列表
    */
-  getComponents(categoryId?: string): ComponentItem[] {
-    const result: ComponentItem[] = [];
+  getComponents(categoryId?: string): FXComponentItem[] {
+    const result: FXComponentItem[] = [];
 
     this.categoryControllerMap.forEach((categoryController, category) => {
       // 如果指定了类别，只处理指定类别
@@ -325,7 +328,7 @@ export class FXViewController {
    */
   private getCategoryController(
     categoryId?: string,
-  ): FXViewCategoryController | null {
+  ): FXCategoryController | null {
     const finalCategoryId = categoryId || "default";
     return this.categoryControllerMap.get(finalCategoryId) || null;
   }
@@ -337,13 +340,13 @@ export class FXViewController {
    */
   private getCategoryControllerOrCreate(
     categoryId?: string,
-  ): FXViewCategoryController {
+  ): FXCategoryController {
     const finalCategoryId = categoryId || "default";
 
     let categoryController = this.categoryControllerMap.get(finalCategoryId);
 
     if (!categoryController) {
-      categoryController = new FXViewCategoryController(
+      categoryController = new FXCategoryController(
         this.fxViewId,
         finalCategoryId,
         this.updateCallback,

package/FXViewManager.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
-import { ComponentController, ComponentItem } from "./types";
+import { FXComponentController, FXComponentItem, FXLifecycleCallbacks } from "./types";
 import { FXViewController } from "./FXViewController";
 export declare class FXViewManager {
     private static instance;
     private viewControllerMap;
-    private viewControllerQueue;
+    private fxViewIdQueue;
+    private viewLifecycleCallbacks;
     static getInstance(): FXViewManager;
     /**
      * 创建并显示组件
@@ -14,7 +15,7 @@ export declare class FXViewManager {
      * @param componentId 组件 ID（可选，自动生成）
      * @returns 组件控制器
      */
-    add(component: React.ReactNode, fxViewId?: string, categoryId?: string, componentId?: string): ComponentController;
+    add(component: React.ReactNode, fxViewId?: string, categoryId?: string, componentId?: string): FXComponentController;
     /**
      * 创建但不显示组件
      * @param component 组件内容
@@ -23,7 +24,7 @@ export declare class FXViewManager {
      * @param componentId 组件 ID（可选，自动生成）
      * @returns 组件控制器
      */
-    build(component: React.ReactNode, fxViewId?: string, categoryId?: string, componentId?: string): ComponentController;
+    build(component: React.ReactNode, fxViewId?: string, categoryId?: string, componentId?: string): FXComponentController;
     /**
      * 显示已存在的组件
      * @param componentId 组件 ID
@@ -83,6 +84,8 @@ export declare class FXViewManager {
      * @returns 是否成功注销
      */
     unregisterView(fxViewId: string): boolean;
+    registerLifecycleCallbacks(callbacks: FXLifecycleCallbacks): void;
+    unregisterLifecycleCallbacks(callbacks: FXLifecycleCallbacks): void;
     /**
      * 获取最近使用的视图 ID（栈顶）
      * @returns 最近的视图 ID 或 null
@@ -94,7 +97,7 @@ export declare class FXViewManager {
      * @param categoryId 分类 ID（可选）
      * @returns 组件列表
      */
-    getComponents(fxViewId?: string, categoryId?: string): ComponentItem[];
+    getComponents(fxViewId?: string, categoryId?: string): FXComponentItem[];
     /**
      * 获取组件数量
      * @param fxViewId 视图 ID（可选，使用最近的视图）

package/FXViewManager.js

@@ -7,7 +7,8 @@ class FXViewManager {
     constructor() {
         // 存储视图控制器
         this.viewControllerMap = new Map();
-        this.viewControllerQueue = new PriorityQueue_1.PriorityQueue(PriorityQueue_1.HeapType.MAX_HEAP, PriorityQueue_1.PriorityOrder.LIFO);
+        this.fxViewIdQueue = new PriorityQueue_1.PriorityQueue(PriorityQueue_1.HeapType.MAX_HEAP, PriorityQueue_1.PriorityOrder.LIFO);
+        this.viewLifecycleCallbacks = [];
         //#endregion
     }
     static getInstance() {
@@ -196,14 +197,12 @@ class FXViewManager {
         }
         // 注册更新回调
         viewController.registerUpdateCallback(updateCallback);
-        // 更新视图栈（移除旧的引用，添加新的）
-        const existingController = this.viewControllerQueue
-            .getAll()
-            .find((vc) => vc.fxViewId === fxViewId);
-        if (existingController) {
-            this.viewControllerQueue.remove(existingController);
-        }
-        this.viewControllerQueue.enqueue(viewController);
+        this.fxViewIdQueue.remove(fxViewId);
+        this.fxViewIdQueue.enqueue(fxViewId);
+        this.viewLifecycleCallbacks.forEach((callback) => {
+            var _a;
+            (_a = callback.didMount) === null || _a === void 0 ? void 0 : _a.call(callback, fxViewId);
+        });
         return viewController;
     }
     /**
@@ -223,18 +222,29 @@ class FXViewManager {
         // 清空所有组件
         viewController.clearAll();
         // 从队列中移除
-        this.viewControllerQueue.remove(viewController);
+        this.fxViewIdQueue.remove(fxViewId);
         // 从 Map 中删除
         this.viewControllerMap.delete(fxViewId);
+        this.viewLifecycleCallbacks.forEach((callback) => {
+            var _a;
+            (_a = callback.willUnmount) === null || _a === void 0 ? void 0 : _a.call(callback, fxViewId);
+        });
         return true;
     }
+    registerLifecycleCallbacks(callbacks) {
+        console.log("FXViewManager.registerLifecycleCallbacks");
+        this.viewLifecycleCallbacks.push(callbacks);
+    }
+    unregisterLifecycleCallbacks(callbacks) {
+        console.log("FXViewManager.unregisterLifecycleCallbacks");
+        this.viewLifecycleCallbacks = this.viewLifecycleCallbacks.filter((callback) => callback !== callbacks);
+    }
     /**
      * 获取最近使用的视图 ID（栈顶）
      * @returns 最近的视图 ID 或 null
      */
     getLatestFXViewId() {
-        var _a;
-        return ((_a = this.viewControllerQueue.peek()) === null || _a === void 0 ? void 0 : _a.fxViewId) || null;
+        return this.fxViewIdQueue.peek() || null;
     }
     /**
      * 获取组件列表
@@ -327,7 +337,7 @@ class FXViewManager {
             console.warn(`FXViewController ${finalFXViewId} not registered, creating a temporary one`);
             viewController = new FXViewController_1.FXViewController(finalFXViewId);
             this.viewControllerMap.set(finalFXViewId, viewController);
-            this.viewControllerQueue.enqueue(viewController);
+            this.fxViewIdQueue.enqueue(finalFXViewId);
         }
         return viewController;
     }

package/FXViewManager.ts

@@ -1,5 +1,9 @@
 import React from "react";
-import { ComponentController, ComponentItem } from "./types";
+import {
+  FXComponentController,
+  FXComponentItem,
+  FXLifecycleCallbacks,
+} from "./types";
 import { FXViewController } from "./FXViewController";
 import { HeapType, PriorityOrder, PriorityQueue } from "./queue/PriorityQueue";
 
@@ -8,8 +12,11 @@ export class FXViewManager {
 
   // 存储视图控制器
   private viewControllerMap: Map<string, FXViewController> = new Map();
-  private viewControllerQueue: PriorityQueue<FXViewController> =
-    new PriorityQueue(HeapType.MAX_HEAP, PriorityOrder.LIFO);
+  private fxViewIdQueue: PriorityQueue<string> = new PriorityQueue(
+    HeapType.MAX_HEAP,
+    PriorityOrder.LIFO,
+  );
+  private viewLifecycleCallbacks: Array<FXLifecycleCallbacks> = [];
 
   static getInstance(): FXViewManager {
     if (!FXViewManager.instance) {
@@ -33,7 +40,7 @@ export class FXViewManager {
     fxViewId?: string,
     categoryId?: string,
     componentId?: string,
-  ): ComponentController {
+  ): FXComponentController {
     console.log("FXViewManager.add", {
       fxViewId,
       categoryId,
@@ -57,7 +64,7 @@ export class FXViewManager {
     fxViewId?: string,
     categoryId?: string,
     componentId?: string,
-  ): ComponentController {
+  ): FXComponentController {
     console.log("FXViewManager.build", {
       fxViewId,
       categoryId,
@@ -242,16 +249,11 @@ export class FXViewManager {
 
     // 注册更新回调
     viewController.registerUpdateCallback(updateCallback);
-
-    // 更新视图栈（移除旧的引用，添加新的）
-    const existingController = this.viewControllerQueue
-      .getAll()
-      .find((vc) => vc.fxViewId === fxViewId);
-    if (existingController) {
-      this.viewControllerQueue.remove(existingController);
-    }
-    this.viewControllerQueue.enqueue(viewController);
-
+    this.fxViewIdQueue.remove(fxViewId);
+    this.fxViewIdQueue.enqueue(fxViewId);
+    this.viewLifecycleCallbacks.forEach((callback) => {
+      callback.didMount?.(fxViewId);
+    });
     return viewController;
   }
 
@@ -276,20 +278,36 @@ export class FXViewManager {
     viewController.clearAll();
 
     // 从队列中移除
-    this.viewControllerQueue.remove(viewController);
+    this.fxViewIdQueue.remove(fxViewId);
 
     // 从 Map 中删除
     this.viewControllerMap.delete(fxViewId);
 
+    this.viewLifecycleCallbacks.forEach((callback) => {
+      callback.willUnmount?.(fxViewId);
+    });
+
     return true;
   }
 
+  registerLifecycleCallbacks(callbacks: FXLifecycleCallbacks): void {
+    console.log("FXViewManager.registerLifecycleCallbacks");
+    this.viewLifecycleCallbacks.push(callbacks);
+  }
+
+  unregisterLifecycleCallbacks(callbacks: FXLifecycleCallbacks): void {
+    console.log("FXViewManager.unregisterLifecycleCallbacks");
+    this.viewLifecycleCallbacks = this.viewLifecycleCallbacks.filter(
+      (callback) => callback !== callbacks,
+    );
+  }
+
   /**
    * 获取最近使用的视图 ID（栈顶）
    * @returns 最近的视图 ID 或 null
    */
   getLatestFXViewId(): string | null {
-    return this.viewControllerQueue.peek()?.fxViewId || null;
+    return this.fxViewIdQueue.peek() || null;
   }
 
   /**
@@ -298,7 +316,7 @@ export class FXViewManager {
    * @param categoryId 分类 ID（可选）
    * @returns 组件列表
    */
-  getComponents(fxViewId?: string, categoryId?: string): ComponentItem[] {
+  getComponents(fxViewId?: string, categoryId?: string): FXComponentItem[] {
     console.log("FXViewManager.getComponents", { fxViewId, categoryId });
 
     const finalFXViewId = fxViewId || this.getLatestFXViewId();
@@ -403,7 +421,7 @@ export class FXViewManager {
       );
       viewController = new FXViewController(finalFXViewId);
       this.viewControllerMap.set(finalFXViewId, viewController);
-      this.viewControllerQueue.enqueue(viewController);
+      this.fxViewIdQueue.enqueue(finalFXViewId);
     }
 
     return viewController;

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-beta1",
   "description": "A dynamic view component for React Native that allows runtime UI updates and component management",
   "main": "index.ts",
   "types": "index.d.ts",

package/types.d.ts

@@ -3,7 +3,7 @@ import type React from "react";
  * 组件控制器接口
  * 用于控制动态组件的显示、隐藏、更新等操作
  */
-export interface ComponentController {
+export interface FXComponentController {
     /** 显示组件 */
     show: () => void;
     /** 隐藏组件 */
@@ -28,8 +28,12 @@ export interface ComponentController {
 /**
  * 组件项配置接口
  */
-export interface ComponentItem {
+export interface FXComponentItem {
     componentId: string;
     component?: React.ReactNode;
     visible?: boolean;
 }
+export interface FXLifecycleCallbacks {
+    didMount: (fxViewId: string) => void;
+    willUnmount: (fxViewId: string) => void;
+}

package/types.ts

@@ -6,7 +6,7 @@ import type React from "react";
  * 组件控制器接口
  * 用于控制动态组件的显示、隐藏、更新等操作
  */
-export interface ComponentController {
+export interface FXComponentController {
   /** 显示组件 */
   show: () => void;
   /** 隐藏组件 */
@@ -32,8 +32,13 @@ export interface ComponentController {
 /**
  * 组件项配置接口
  */
-export interface ComponentItem {
+export interface FXComponentItem {
   componentId: string; // 组件唯一标识（必填）
   component?: React.ReactNode; // 组件内容
   visible?: boolean; // 是否可见，默认为 true
 }
+
+export interface FXLifecycleCallbacks {
+  didMount: (fxViewId: string) => void;
+  willUnmount: (fxViewId: string) => void;
+}