React Native FXView

一个革命性的React Native动态UI预埋框架，支持在任何位置预埋容器，然后通过全局管理器在运行时动态注入和控制React组件。

🎯 核心概念

FXView采用预埋+注入的设计模式：

1. 预埋容器：在应用的任何位置预埋FXView容器
2. 动态注入：通过FXManager在任何时间、任何位置动态注入React组件
3. 全局控制：支持跨组件、跨页面的全局UI管理和状态控制

✨ 功能特性

• 🎯 动态组件注入 - 运行时在任何预埋位置注入React组件
• 🔄 实时UI更新 - 支持组件内容的实时更新和状态管理
• 📂 智能分类管理 - 按分类组织和管理动态组件
• 👁️ 显示/隐藏控制 - 灵活控制组件的显示状态
• 🌍 全局访问 - 从应用的任何地方访问和管理UI
• 🚀 轻量级高性能 - 优化的渲染性能和内存管理
• 📊 组件状态查询 - 支持查询组件数量和可见状态
• 🔄 生命周期管理 - 支持视图的挂载和卸载回调

📦 安装

npm install react-native-fxview
# 或者
yarn add react-native-fxview

🚀 快速开始

1. 预埋FXView容器

在任何需要动态注入UI的位置预埋FXView：

import React from 'react';
import { View, Text } from 'react-native';
import { FXView } from 'react-native-fxview';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <Text>静态内容</Text>
      
      {/* 预埋动态UI容器 */}
      <FXView fxViewId="headerArea" style={{ height: 60 }} />
      
      <Text>更多静态内容</Text>
      
      {/* 在底部预埋另一个容器 */}
      <FXView fxViewId="bottomSheet" style={{ position: 'absolute', bottom: 0 }} />
    </View>
  );
}

2. 动态注入组件

从应用的任何地方（甚至不同的页面或组件）动态注入UI：

import { FXManager } from 'react-native-fxview';
import { Button, View, Text } from 'react-native';

// 在headerArea注入一个搜索栏
const searchBarController = FXManager.add(
  <View style={{ backgroundColor: '#f0f0f0', padding: 10 }}>
    <Text>搜索栏组件</Text>
  </View>,
  'headerArea',  // fxViewId
  'navigation'   // categoryId
);

// 在bottomSheet注入一个弹窗
const sheetController = FXManager.add(
  <View style={{ backgroundColor: 'white', padding: 20, borderRadius: 10 }}>
    <Text>底部弹窗内容</Text>
    <Button title="关闭" onPress={() => sheetController.hide()} />
  </View>,
  'bottomSheet',
  'modals'
);

3. 运行时控制

// 隐藏搜索栏
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): 容器唯一标识符，用于后续注入组件时的定位
• 支持所有标准的 ViewProps 属性

FXManager 主要方法

组件管理

• 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?) - 移除组件
• removeLast(fxViewId?, category?) - 移除最后一个组件（向后兼容）

批量操作

• clearAll(fxViewId?) - 清空指定或所有容器
• clearCategory(categoryId, fxViewId?) - 清空指定分类

查询方法

• getComponents(fxViewId?, category?) - 获取组件列表
• getComponentCount(fxViewId?) - 获取组件数量
• getVisibleComponentCount(fxViewId?) - 获取可见组件数量
• hasComponent(componentId, fxViewId?, category?) - 检查组件是否存在
• isComponentVisible(componentId, fxViewId?, category?) - 检查组件是否可见
• getLatestFXViewId() - 获取最近使用的视图ID

视图管理

• registerView(fxViewId, updateCallback) - 注册视图（内部使用）
• unregisterView(fxViewId) - 注销视图（内部使用）
• registerLifecycleCallbacks(callbacks) - 注册生命周期回调
• unregisterLifecycleCallbacks(callbacks) - 注销生命周期回调

组件控制器 (FXComponentController)

• show() - 显示组件
• hide() - 隐藏组件
• remove() - 移除组件
• update(newComponent) - 更新组件内容
• isVisible() - 获取可见状态
• exists() - 检查组件是否存在

💡 使用场景

1. 动态导航栏

在不同页面根据状态动态改变顶部导航栏内容

2. 全局弹窗系统

从任何地方触发全局弹窗、通知、确认框等

3. 动态表单

根据用户操作动态添加、移除、更新表单字段

4. 插件化UI

支持第三方插件动态注入UI组件到主应用

5. A/B测试

动态切换不同的UI组件进行A/B测试

6. 实时通知系统

在应用的指定位置动态显示通知和提示信息

🎯 最佳实践

分类管理

使用分类来组织不同类型的动态组件：

// 导航相关
FXManager.add(navComponent, 'header', 'navigation');

// 弹窗相关
FXManager.add(modalComponent, 'overlay', 'modals');

// 通知相关
FXManager.add(toastComponent, 'notification', 'notifications');

生命周期管理

// 创建时
const controller = FXManager.build(component, 'container');

// 需要时显示
controller.show();

// 不需要时隐藏
controller.hide();

// 完全清理
controller.remove();

组件状态监控

// 检查组件是否存在
const exists = FXManager.hasComponent('myComponent', 'container');

// 检查组件是否可见
const visible = FXManager.isComponentVisible('myComponent', 'container');

// 获取组件数量
const count = FXManager.getComponentCount('container');

// 获取可见组件数量
const visibleCount = FXManager.getVisibleComponentCount('container');

🔧 高级用法

生命周期回调

FXManager.registerLifecycleCallbacks({
  didMount: (fxViewId) => console.log('FXView挂载:', fxViewId),
  willUnmount: (fxViewId) => console.log('FXView卸载:', fxViewId)
});

组件查询和批量操作

// 获取所有导航组件
const navComponents = FXManager.getComponents(null, 'navigation');

// 清空所有弹窗
FXManager.clearCategory('modals');

// 清空指定容器的所有组件
FXManager.clearAll('container');

// 清空所有容器的所有组件
FXManager.clearAll();

自动视图ID管理

// 不指定fxViewId，使用自动生成的ID
const controller = FXManager.add(component);

// 获取最近使用的视图ID
const latestViewId = FXManager.getLatestFXViewId();

📄 许可证

MIT