# @exodus/gorhom-portal 中文文档
规范地址：https://npmcn.com/package/%40exodus/gorhom-portal/
版本：1\.0\.14-exodus\.0
npm 元数据更新时间：2026-10-06T21:00:17.982Z
中文译文更新时间：2026-11-14T04:17:29.608Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40exodus/gorhom-portal
原文对照：https://npmcn.com/package/%40exodus/gorhom-portal/?lang=original
项目主页：https://github.com/ExodusMovement/react-native-portal#readme
源码仓库：https://github.com/ExodusMovement/react-native-portal
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：52.1 kB，53 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \*，react-native \*
- 首次发布：2023-10-12T18:31:56.946Z
- 最新版本发布：2023-10-12T18:31:57.151Z
- 近 30 天下载量：10364（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）
## 中文简介
QQ React Native 的简化门户网站执行
## 安装
```sh
npm install @exodus/gorhom-portal
```
也可以使用：`pnpm add @exodus/gorhom-portal`、`yarn add @exodus/gorhom-portal`、`bun add @exodus/gorhom-portal`
## README
# 反应原生门户
[](https://www.npmjs.com/package/@gorhom/portal) [](https://www.npmjs.com/package/@gorhom/portal) [](https://www.npmjs.com/package/@gorhom/portal) [](https://snack.expo.io/@gorhom/portal-example)
QQ React Natural 的简化出入口执行.
* * *
## 特征
- 多门户处理.
- 多门户主机处理.
- 允许覆盖功能 .
- 兼容 `React Native Web`。 。 。 .
- 兼容 `Expo`, (中文(简体) ), [看看博览会小吃项目](https://snack.expo.io/@gorhom/portal-example)。 。 。 .
- 写入 `TypeScript`。 。 。 .
## 安装
```sh
yarn add @gorhom/portal
```
## 使用量
### 简单门户
这是这个图书馆非常简单的用途,在那里,你将把内容传送到 `PortalProvider` 程序层.
首先,你需要添加 `PortalProvider` 到您的根组件 - 这通常是 `App.tsx`。 。 。 .
```tsx
export const App = () => (
{... your app goes here}
);
```
最后,将您想要传送的内容包起来 `Portal`。 。 。 .
```tsx
const BasicScreen = () => {
return (
{ ... }
Text to be teleported to the root host
{ ... }
);
};
```
### 自定义门户主机
当您需要将您的内容传送到自定义的门户主机时 `PortalHost` 在应用程序的任何一层.
首先,你需要添加 `PortalProvider` 到您的根组件 - 这通常是 `App.tsx`。 。 。 .
```tsx
export const App = () => (
{... your app goes here ...}
);
```
第二,你需要添加 `PortalHost` 使用自定义名称.
```tsx
const CustomView = () => {
return (
{ ... }
{ ... }
);
};
```
最后,将您想要传送的内容包起来 `Portal` 和自定义门户主机名.
```tsx
const BasicScreen = () => {
return (
{ ... }
Text to be teleported to the CustomView component
{ ... }
);
};
```
### 反应原生屏幕集成
为了将您传送的内容放在所有本地视图之上, 您需要用 `FullWindowOverlay` 从 `react-native-screens`。 。 。 .
```tsx
import { FullWindowOverlay } from 'react-native-screens';
const BasicScreen = () => {
return (
{ ... }
Text to be teleported to the CustomView component
{ ... }
);
};
```
### 反应原生手势
为了避免在使用“反动土著手势”时出现问题,您必须设置 `PortalProvider` 下划线 `GestureHandlerRootView`否则它可能会冻结你的应用程序.
```tsx
export const App = () => (
{... your app goes here}
);
```
> 更多关于 [应用程序冻结问题](https://github.com/gorhom/react-native-portal/issues/24)。 。 。 .
## 道具
### 门户道具
#### `name`
Portal)的密钥或取名来作代号.
> `required:` 没有 `type:` 字符串% 1 `default:` 自动生成唯一密钥
#### `hostName`
主机的密钥或名称可以传送门户内容到.
> `required:` 没有 `type:` 字符串% 1 `default:` '根' (英语)
#### `handleOnMount`
覆盖内部挂起功能, 如果您想在挂起门户内容前触发任何动作, 则此功能是有用的 .
```ts
type handleOnMount = (mount?: () => void) => void;
```
> `required:` 没有 `type:` 函数 qq `default:` 未定义
#### `handleOnUnmount`
覆盖内部卸载功能, 如果您想在卸载门户内容之前触发任何动作, 则此功能是有用的 .
```ts
type handleOnUnmount = (unmount?: () => void) => void;
```
> `required:` 没有 `type:` 函数 qq `default:` 未定义
#### `children`
门户网站内容.
> `required:` 没有 `type:` 反向节点 QQ反向节点 \[\] QQ `default:` 未定义
### 门厅道具
#### `name`
主机的密钥或名称用作标识符.
> `required:` 对 `type:` 字符串
## 钩子
### `usePortal`
访问所有门户的内部功能.
```ts
/**
* @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 (英语)](https://github.com/react-native-community/bob)
## 作者
- [莫·高尔洪](https://gorhom.dev/)
## 赞助和支持
为了保持该图书馆的维持和更新,请考虑 [在GitHub上赞助](https://github.com/sponsors/gorhom)或者,如果你寻求私人支持或帮助 定制经验,然后通过Twitter联系我 [@gorhom (英语)](https://twitter.com/gorhom)。 。 。 .
## 许可证
[麻省理工学院](https://npmcn.com/package/%40exodus/gorhom-portal/LICENSE)
* * *
[](https://gorhom.dev/#gh-light-mode-only)[](https://gorhom.dev/#gh-dark-mode-only)
## 常见问题
### @exodus/gorhom-portal 是什么？
QQ React Native 的简化门户网站执行
### 如何安装 @exodus/gorhom-portal？
在项目目录运行 npm install @exodus/gorhom-portal，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @exodus/gorhom-portal 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @exodus/gorhom-portal 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @exodus/gorhom-portal 可以商用吗？
@exodus/gorhom-portal 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @exodus/gorhom-portal 的下载量有多少？
根据 npm 官方下载统计，@exodus/gorhom-portal 在 2026/10/14 – 2026/11/12 这 30 天内被下载 10,364 次，日均约 345 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @exodus/gorhom-portal 还在维护吗？
最新版本 1\.0\.14-exodus\.0 发布于 2023/10/13（3 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/10/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。