@facilitronworks/ react-native-windows-models (英语)

A 类 反应内置物的倒入替换 <Modal> 帮助 反应原生窗口 新架构(结构/组成),核心 <Modal> 没有.

JS/TSX只——没有本土代码,没有自动连接,没有重建.

状况:释放前0.1.0-pre.1) (中文(简体) ). 取自一款航运出品的Windows app (RNW 0.83.2),其中它取代了应用程序中每一个被破坏的模式.

这里所证实的是: 见 核查状况。 。 。 .

为什么会这样

关于RNW新阵容, <Modal> 由当地人支持 WindowsModalHostView (单位:千美元)Microsoft.ReactNative/Fabric/Composition/Modal) (中文(简体) ). 这个部分确实 没有 使应用程序覆盖iOS和Android的方式。 它旋转起一个 单独的顶级操作系统窗口 —— 说 DesktopPopupSiteBridge + 键 OverlappedPresenter.IsModal(true) ——拥有自有的原生标题栏,边框和收紧(X)按钮,以及从孩子的布局框起的窗口大小(ContentSizePolicy::None → AdjustWindowSize) (中文(简体) ).

两种后果打破了现实世界的模式:

1. 联合国. transparent + 弹性内容使外壳为空而不可关闭. 绝大多数常见的模式是透明的宿主,上面有满血的孩子:

<Modal transparent visible={open} onRequestClose={close}>
  <View style={{ flex: 1 }}>…</View>
</Modal>

内部a 内容大小 弹出没有限制大小 flex: 1 要填充,所以框架措施 {0, 0}, (中文(简体) ), AdjustWindowSize 保释金,你得到一个空的窗口。 更糟糕的是,这是 粘贴:内置的关闭按钮从未挂起, 因为内容从未列出, 而本地标题栏 X 发射 onRequestClose 它没有关闭窗口本身。 如果你的处理器在内容上 从来没有提供, 没有出路的方式.

2. 不透明的全屏内容成为第二个桌面窗口. 与标题栏和铬完全相同——在iOS和Android上生成的同一种代码与申请表一样.

修补

react-native-paper是因为 <Modal> 工作在RNW 正是因为它使 在树上 <Portal> 覆盖在 同一个窗口/岛屿 ——不涉及本土模式主机. 此软件包反映了标准背后的处理方式 <Modal> API : (英语)

• 在视窗上 : 调制 children 进入绝对位置的根层 <Portal> 重叠. StyleSheet.absoluteFill 给上面一个 确定大小,这正是内容大小的本地弹出无法提供的——所以 flex: 1 孩子们排好队.
• 在其他平台上: 代表们,请各位 react-native <Modal>,道具的传播没有改变。 iOS /Android / 网络行为是同义字节.

这意味着你可以在全球互换导入,只改变Windows的行为.

安装

npm install @facilitronworks/react-native-windows-modal
# or: yarn add @facilitronworks/react-native-windows-modal

同伴依赖性 : react, (中文(简体) ), react-native,以及 react-native-paper 页:1 - 纸张 Portal 是覆盖主机,和纸 useTheme() 提供不透明模式的背景颜色.

你一定有一个 <PaperProvider> (或赤裸地) <Portal.Host>安装在您的应用根. 这就是"门户"带来的。 没有它,模式 使Windows上什么也没有.

// app root
<PaperProvider>
  <App />
</PaperProvider>

使用量

import WindowsModal from '@facilitronworks/react-native-windows-modal';

<WindowsModal transparent visible={open} onRequestClose={close}>
  <View style={{ flex: 1, justifyContent: 'center' }}>
    …
  </View>
</WindowsModal>

最简单的是全项目的进口互换:

- import { Modal } from 'react-native';
+ import WindowsModal as Modal from '@facilitronworks/react-native-windows-modal';

两者都有一个命名的导出( T)WindowsModal)和默认导出.

支持的道具, 以及Windows上忽略的内容

每个 ModalProps 在非窗口平台上逐字转发。 打开 窗口只有对树上覆盖有意义的道具才会被尊重:

会话重播/ 完整的故事

Full Story (反应原生) 默认情况下所有内容 并揭示一个元素,当它携带 fs-unmask 标记。 在 Windows 上,此组件使其覆盖为平面 react-native View和内部应用不同 View 把它取出 硬码 fsClass="fs-unmask" ——模式为: 蒙上面具 在会话重播.

解开它,通过 unmask数字 :

<WindowsModal transparent visible={open} onRequestClose={close} unmask>
  …
</WindowsModal>

这个向前 fsClass="fs-unmask" 输入覆盖 View默认 false (masked)——安全的FullStory默认——所以只有在模式内容在重放中安全显示时才选择. 只用Windows(覆盖为只用Windows);它是其他平台的惰性.

你会撞上陷阱

• 没有 <Portal.Host> 意味着没有模式. 最有可能的失败 如果你的应用根没有 PaperProvider, Windows 路径默默地使无所事事.
• 这不是一种真正的模式——它不限制焦点. 这是同一窗口的上盖。 键盘焦点和屏幕阅读器转接仍然可以到达下方的应用树. 不要依赖它 任何安全或正确的关键.
• 逃不关. 原生标题栏-X已去掉(这就是重点),但没有任何东西可以取而代之——如果需要的话,可以自己接通钥匙处理.
• 只有在你经过的时候背景才存在 onRequestClose。 。 。 . 没有那个道具就没有 Pressable scrim,所以敲门什么也没有。 这是蓄意的——不能关闭任何东西的圈套.
• animationType 默默地在Windows上无所作为. Modals 立即出现并消失;一个依赖于滑入的设计会看起来突然.
• 亲兄弟Z令. 套装 zIndex编号 :elevation 9999,但其中两个在Portal顺序中同时打开堆栈,而不是以任何明确的优先级.
• transparent 行为和你可能读的不一样. 它是否控制着 本构成部分 绘制一个背景填充,而不是OS窗口是否透明(没有OS窗口).

核查状况

已验证,在这个精确的包装来源上:

• 类型检查干净 严格模式下TypeScript 5.9,按实值解决 react, (中文(简体) ), react-native, (中文(简体) ), react-native-paper 财务报告和审定财务报表 @types/react 设施(RN 0.83.2,第5.14.5页).
• npm pack 生产含有实际TSX源的柏油球.

未核实 - 不假定其中任何一项:

• 运行时间行为 此软件包。 。 。 . 逻辑是生产-在从它提取的应用程序中被证明,但这里所打包的代码并没有被渲染出——不是在Windows上,也不是在任何平台上.

• 两个取出变化是新而未被执行的. 最初使用的应用程序本地模块;这两个模块都用于此软件包:

  1. 上面的容器是一个应用程序内部 View 包装( 只添加一个完整的故事) fsClass 丙子)-现在平地上 react-native View 重新应用 fsClass="fs-unmask" 仅在 unmask 设置了道具;
  2. 背景颜色来自一个 app- local 主题背景 ~ 现在 useTheme() 从反应-内生纸.

  这些编译和打字检查;没有在屏幕上看到它们。 论文 useTheme() 特别是假设您的纸质主题 colors.background 是非透明模式后面的颜色.

• 没有实例应用,没有自动化测试,没有CI.

• 行为 筑巢 模式以及与其他门户网站用户的互动未经测试.

许可证

麻省理工学院