如何在 react native-paper 中提升警报？答案

【问题标题】：How elevate the alert in react native-paper?如何在 react native-paper 中提升警报？
【发布时间】：2021-11-01 18:45:21
【问题描述】：

我想显示警报，但我的警报使我的应用向下滚动，如下所示 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>
      </>
  )

【问题讨论】：

标签： react-native alert react-native-paper

【解决方案1】：

根据documentation对于Portal的用法：

Portal 允许在父树中的不同位置渲染组件。您可以使用它来呈现应该出现在其他元素之上的内容，类似于 Modal。它需要一个门户。要在父树中某处呈现的宿主组件

因此，如果您想将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 样式属性。

【讨论】：