如何提升 react native-paper 中的警报？

Question

我想显示一个警报，但我的警报使我的应用程序像这样向下滚动 alert image 我想在中心显示警报并提升它。

我试过这个 css，但没有任何效果

const styles = StyleSheet.create({
  elevatedElement: {
    zIndex: 3000000, 
    elevation: 3000000, 
  },
})

这是我的警报代码

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

const Alert = ({ show, setShow }) => {


  return (
    <Provider>
      <View>
        <Portal>
          <Dialog visible={show} >
            <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>
      </View>
    </Provider>
  );
};

export default Alert;

我正在像这样使用那个组件

return (
    <><Alert show={true} />
    <Background>
       <RightButton goRight={logout} />
      <Logo />
      </Background>
      </>
  )

Answer 1

根据documentation对于Portal的用法：

Portal allows rendering a component at a different place in the parent tree. You can use it to render content that should appear above other elements, similar to Modal. It requires a Portal. Host component to be rendered somewhere in the parent tree

因此，如果您想在其他元素（如模态）之上呈现 Portal，您应该使用 Portal.Host:

**注意：**尝试将 Portal 组件实现为 Alert 组件的第一个元素，而不使用 View 元素，如下所示：

import { Portal } from 'react-native-paper';

// rest of the codes ...

return (
    <Portal.Host>
      <Dialog visible={show} >
        <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.Host>
  );

无需为此组件设置 zIndex 或 elevation 样式属性。

如何提升 react native-paper 中的警报？

How elevate the alert in react native-paper?

react-native

alert

react-native-paper