react-native-root-siblings

开源

一个兄弟元素管理器。

737 stars0 点赞1 次浏览

工具介绍

一个兄弟元素管理器。

React-native-root-siblings

为 React 和 React-native 创建覆盖层(Modal,Popover,Dialog 等)的最简单方法。自行创建 showModal 并将其用于任何组件,无需 isShow 状态,甚至可以在纯函数调用中使用。

javascript

import RootSiblingsManager from 'react-native-root-siblings';

export const showModal = (renderModal) => {
  let rootNode;
  const onClose = () => {
    rootNode?.destroy();
    rootNode = null;
  };
  rootNode = new RootSiblingsManager(renderModal(onClose));
  return onClose;
};

import WelcomeModal from './WelcomeModal';

export function showWelcomeModal() {
  showModal((onClose) => );
}

// ...
function HomeScreen() {
  return Welcome!
}

setTimeout(showWelcomeModal, 3000);

安装

bash

npm i react-native-root-siblings

在根渲染函数中,将 RootSiblingParent 插入到您的提供者和根应用之间。

javascript

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

return (
  
      // 
  
);

RootSiblingParent 作为安装基础，可以多次安装。只有最后一次安装的内容才会生效。在 React Native 中,视图的层次越高,就表示它越靠近根级别。

javascript


    //  
        //  
        { /* View put in here would be transported to RootSiblingParent 
            * So it can have a same hierarchy as the RootView to cover any other views
            */}

在 React 中，我们有 createPortal，但它仍然不太方便，因为无法在组件之外使用。React-native-root-siblings 提供了最大的灵活性：