react-native-root-siblings 技术文档

react-native-root-siblings 技术文档

react-native-root-siblings A sibling elements manager. 项目地址: https://gitcode.com/gh_mirrors/re/react-native-root-siblings

react-native-root-siblings 是一款简化在 React Native 和 React 中创建叠加层（如 Modal, Popover, Dialog 等）的工具库，它使您能够在任何组件内无需管理显示状态（例如 isShow），甚至可以在纯函数中直接调用以展示模态框。

安装指南

要安装此库，只需运行以下命令：

npm i react-native-root-siblings

安装完毕后，需要在您的应用的根渲染函数中插入 RootSiblingParent 组件，以便正确地管理和呈现顶层元素。

import { SomeProviders, RootSiblingParent } from 'yourDependencies'; // 假设SomeProviders是你应用的提供者们

const AppWrapper = () => {
  return (
    <SomeProviders>
      <RootSiblingParent> {/* 使用 RootSiblingParent 包裹根组件 */}
        <YourActualAppComponent />
      </RootSiblingParent>
    </SomeProviders>
  );
};

项目使用说明

显示对话框示例

react-native-root-siblings 提供了简单的方法来显示模态对话框，不需要每个组件都维护显示逻辑：

import { RootSiblingsManager } from 'react-native-root-siblings';
import WelcomeModal from './WelcomeModal'; // 假定这是您的模态组件

export const showModal = (renderModal) => {
  let rootNode;
  
  const onClose = () => {
    rootNode?.destroy(); // 销毁当前模态
    rootNode = null;
  };
  
  // 创建并显示模态
  rootNode = new RootSiblingsManager(renderModal(onClose));
  
  return onClose; // 返回关闭函数供外部调用
};

// 如何使用这个函数显示模态
function showWelcomeModal() {
  showModal((close) => <WelcomeModal onClose={close} />);
}

export default function YourScreen() {
  // 例如，在按钮点击事件中调用
  return <Button title="显示欢迎" onPress={showWelcomeModal} />;
}

项目API使用文档

命令式API（Imperative API）

1. 创建兄弟元素

   let sibling = new RootSiblings(<YourComponent />);
   

2. 更新兄弟元素

   sibling.update(<UpdatedComponent />);
   

3. 销毁兄弟元素

   sibling.destroy();
   

组件API

使用 RootSiblingPortal 可以在任何位置放置覆盖元素，它会自动被提升到与根视图相同的层级，从而能够覆盖其他所有元素：

import { RootSiblingPortal } from 'react-native-root-siblings';

class CustomOverlay extends Component {
  render() {
    return (
      <RootSiblingPortal>
        <View style={[StyleSheet.absoluteFill, { backgroundColor: 'rgba(0, 0, 0, 0.25)' }]}/>
      </RootSiblingPortal>
    );
  }
}

示例

下面是如何在一个简单的应用中使用 react-native-root-siblings 的示例：

import React, { Component } from 'react-native';
import RootSiblings from 'react-native-root-siblings';

class SiblingsExample extends Component {
  // ... 实现 addSibling, destroySibling, updateSibling 方法和 render 函数
}

// 在App注册时包裹应用
AppRegistry.registerComponent('SiblingsExample', () => SiblingsExample);

通过以上步骤和说明，您可以有效地利用 react-native-root-siblings 来管理应用中的动态覆盖层，为用户提供更好的交互体验。记住保持库的更新，并留意GitHub仓库中的最新信息和潜在问题报告。

react-native-root-siblings A sibling elements manager. 项目地址: https://gitcode.com/gh_mirrors/re/react-native-root-siblings