如何在react native-paper中实现Alert弹窗居中并提升层级不被遮挡

问题核心原因 #

你遇到的问题根源是两个错误用法：

1. react-native-paper的Provider需要放在应用的根节点，你将其封装在Alert组件内部，导致Portal的全局层级上下文不生效，你设置的zIndex、elevation无法作用于全页面层级。
2. 调用Alert组件时你将其放在背景组件之前，React同级组件渲染顺序靠后的默认层级更高，所以背景组件直接覆盖了Alert。

具体修改步骤 #

• 第一步：将react-native-paper的Provider移到应用根组件（如App.js/index.js），不要在Alert组件内部重复声明

import { Provider as PaperProvider } from 'react-native-paper';

export default function App() {
  return (
    <PaperProvider>
      {/* 整个应用的路由、根组件全部放在此处 */}
    </PaperProvider>
  );
}

• 第二步：简化Alert组件，给Dialog添加居中、提升层级的样式

import React from 'react'
import { Button, Paragraph, Dialog, Portal } from 'react-native-paper';

const Alert = ({ show, setShow }) => {
  return (
    <Portal>
      <Dialog 
        visible={show}
        style={{
          alignSelf: 'center',
          zIndex: 9999,
          elevation: 9999
        }}
      >
        <Dialog.Title>Alert</Dialog.Title>
        <Dialog.Content>
          <Paragraph>This is simple dialog</Paragraph>
        </Dialog.Content>
        <Dialog.Actions>
          <Button onPress={setShow}>Done</Button>
        </Dialog.Actions>
      </Dialog>
    </Portal>
  );
};

export default Alert;

• 第三步：调整Alert组件的调用顺序，放在所有页面内容之后，保证同级渲染时层级最高

return (
  <>
    <Background>
      <RightButton goRight={logout} />
      <Logo />
    </Background>
    <Alert show={true} setShow={你对应的控制显隐的方法} />
  </>
)

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