反应原生门户

QQ React Natural 的简化出入口执行.

特征

• 多门户处理.
• 多门户主机处理.
• 允许覆盖功能 .
• 兼容 React Native Web。 。 。 .
• 兼容 Expo, (中文(简体) ), 看看博览会小吃项目。 。 。 .
• 写入 TypeScript。 。 。 .

安装

yarn add @gorhom/portal

使用量

简单门户

这是这个图书馆非常简单的用途,在那里,你将把内容传送到 PortalProvider 程序层.

首先,你需要添加 PortalProvider 到您的根组件 - 这通常是 App.tsx。 。 。 .

export const App = () => (
  <PortalProvider>
  {... your app goes here}
  </PortalProvider>
);

最后,将您想要传送的内容包起来 Portal。 。 。 .

const BasicScreen = () => {
  return (
    { ... }
    <Portal>
      <Text>
        Text to be teleported to the root host
      </Text>
    </Portal>
    { ... }
  );
};

自定义门户主机

当您需要将您的内容传送到自定义的门户主机时 PortalHost 在应用程序的任何一层.

首先,你需要添加 PortalProvider 到您的根组件 - 这通常是 App.tsx。 。 。 .

export const App = () => (
  <PortalProvider>
  {... your app goes here ...}
  </PortalProvider>
);

第二,你需要添加 PortalHost 使用自定义名称.

const CustomView = () => {
  return (
    { ... }
    <PortalHost name="CustomPortalHost" />
    { ... }
  );
};

最后,将您想要传送的内容包起来 Portal 和自定义门户主机名.

const BasicScreen = () => {
  return (
    { ... }
    <Portal hostName="CustomPortalHost">
      <Text>
        Text to be teleported to the CustomView component
      </Text>
    </Portal>
    { ... }
  );
};

反应原生屏幕集成

为了将您传送的内容放在所有本地视图之上, 您需要用 FullWindowOverlay 从 react-native-screens。 。 。 .

import { FullWindowOverlay } from 'react-native-screens';

const BasicScreen = () => {
  return (
    { ... }
    <Portal>
      <FullWindowOverlay style={StyleSheet.absoluteFill}>
        <Text>
          Text to be teleported to the CustomView component
        </Text>
      </FullWindowOverlay>
    </Portal>
    { ... }
  );
};

反应原生手势

为了避免在使用“反动土著手势”时出现问题,您必须设置 PortalProvider 下划线 GestureHandlerRootView否则它可能会冻结你的应用程序.

export const App = () => (
  <GestureHandlerRootView>
    <PortalProvider>
    {... your app goes here}
    </PortalProvider>
  </GestureHandlerRootView>
);

更多关于 应用程序冻结问题。 。 。 .

道具

门户道具

name

Portal)的密钥或取名来作代号.

required: 没有 type: 字符串% 1 default: 自动生成唯一密钥

hostName

主机的密钥或名称可以传送门户内容到.

required: 没有 type: 字符串% 1 default: '根' (英语)

handleOnMount

覆盖内部挂起功能, 如果您想在挂起门户内容前触发任何动作, 则此功能是有用的 .

type handleOnMount = (mount?: () => void) => void;

required: 没有 type: 函数 qq default: 未定义

handleOnUnmount

覆盖内部卸载功能, 如果您想在卸载门户内容之前触发任何动作, 则此功能是有用的 .

type handleOnUnmount = (unmount?: () => void) => void;

required: 没有 type: 函数 qq default: 未定义

children

门户网站内容.

required: 没有 type: 反向节点 QQ反向节点 [] QQ default: 未定义

门厅道具

name

主机的密钥或名称用作标识符.

required: 对 type: 字符串

钩子

usePortal

访问所有门户的内部功能.

/**
 * @param hostName host name or key.
 */
type usePortal = (hostName: string = 'root') => {
  /**
   * Register a new host.
   */
  registerHost: () => void;
  /**
   * Deregister a host.
   */
  deregisterHost: () => void;
  /**
   * Add portal to the host container.
   * @param name portal name or key
   * @param node portal content
   */
  addPortal: (name: string, node: ReactNode) => void;
  /**
   * Update portal content.
   * @param name portal name or key
   * @param node portal content
   */
  updatePortal: (name: string, node: ReactNode) => void;
  /**
   * Remove portal from host container.
   * @param name portal name or key
   */
  removePortal: (name: string) => void;
};

由 QQ 创建

• @ react-native-community/bob (英语)

作者

• 莫·高尔洪

赞助和支持

为了保持该图书馆的维持和更新,请考虑 在GitHub上赞助或者,如果你寻求私人支持或帮助 定制经验,然后通过Twitter联系我 @gorhom (英语)。 。 。 .

许可证

麻省理工学院