React Native Dialog报children不存在、usePortalContext错误

报错信息 #

遇到的两个关联报错分别为TypeScript编译报错和运行时渲染错误：

TS2322: Type '{ children: Element[]; visible: boolean; onDismiss: () => void; }' is not assignable to type 'IntrinsicAttributes & DialogProps'. Property 'children' does not exist on type 'IntrinsicAttributes & DialogProps'.

Render Error: usePortalContext must be used within a Portal Context

报错原因 #

• 核心诱因是组件树缺失Dialog依赖的Portal上下文：@react-native-material/core的Dialog组件基于Portal实现跨层级全局挂载，必须在父级组件树中存在PortalProvider提供的上下文才能正常渲染，官方文档示例运行在预包裹Provider的演示环境中，单独复制组件代码使用时会缺失该依赖。
• 类型报错是库的旧版本类型定义缺陷：部分较早版本的DialogProps类型未显式声明children属性，导致TS无法识别子节点传参。

修复步骤 #

• 从依赖包中导入PortalProvider组件
• 在使用Dialog的组件外层（推荐直接在应用根组件全局包裹一次，全应用复用）包裹PortalProvider，为子组件提供Portal上下文
• 若仍存在TS类型报错，将@react-native-material/core升级到最新稳定版本即可修复类型定义遗漏问题

修复后可运行完整代码 #

import React, {useState} from 'react';
import {
  Button,
  Dialog,
  DialogHeader,
  DialogContent,
  DialogActions,
  Text,
  PortalProvider
} from '@react-native-material/core';

const Dialog_ = () => {
  const [visible, setVisible] = useState(false);

  return (
    <PortalProvider>
      <Button
        title="Open Alert Dialog"
        style={{margin: 16}}
        onPress={() => setVisible(true)}
      />
      <Dialog visible={visible} onDismiss={() => setVisible(false)}> 
        <DialogHeader title="Dialog Header" />
        <DialogContent>
          <Text>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum
            eligendi inventore, laboriosam laudantium minima minus nesciunt
            pariatur sequi.
          </Text>
        </DialogContent>
        <DialogActions>
          <Button
            title="Cancel"
            compact
            variant="text"
            onPress={() => setVisible(false)}
          />
          <Button
            title="Ok"
            compact
            variant="text"
            onPress={() => setVisible(false)}
          />
        </DialogActions>
      </Dialog>
    </PortalProvider>
  );
};

export default Dialog_;

内容的提问来源于stack exchange，提问作者Grand Skunk