React-native-flash-message 得到卡片

Question

我正在使用 react-native-flash-message https://www.npmjs.com/package/react-native-flash-message。

一切正常，因为它们易于使用。但问题是当我将它与Card 组件（来自react-native-paper）一起使用时，消息隐藏在卡片下。我希望信息是最重要的。

我尝试了zIndex 但它不起作用。

这里是演示代码；

import * as React from 'react';
import { View, ScrollView } from 'react-native';
import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
import FlashMessage from 'react-native-flash-message';
import { showMessage } from 'react-native-flash-message';

const LeftContent = (props) => <Avatar.Icon {...props} icon="folder" />;
const show = () => {
  showMessage({
    message: 'This is a message',
  });
};

const MyComponent = () => (
  <View style={{justifyContent: 'center', marginTop: 30}}>
    <Card style={{ margin: 30 }} elevation={30}>
      <ScrollView contentContainerStyle={{justifyContent: 'center', marginTop: 30}}>
        <Card.Title
          title="Card Title"
          subtitle="Card Subtitle"
          left={LeftContent}
        />
        <Card.Content>
          <Title>Card title</Title>
          <Paragraph>Card content</Paragraph>
        </Card.Content>
        <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
        <Card.Actions>
          <Button onPress={() => show()}>show message</Button>
        </Card.Actions>
      </ScrollView>
    </Card>
    <FlashMessage style={{ marginTop: 20 }} position="top" />
  </View>
);

export default MyComponent;

请注意，此问题仅发生在 android 设备上。在 ios 上，它工作正常。

虽然我找到了解决方案。将<FlashMessage style={{ marginTop: 20 }} position="top" /> 放在卡片组件中会解决它，但是我已经全局启用了FlashMessage，所以我想全局更改它并且不想把它放在每个卡片组件中

Answer 1

经过一番搜索，我发现虽然react-native-flash-message 不是以这种方式呈现在card、modals 或dialog 等所有内容之上的。

所以解决它的一种方法（事实上，我认为这是唯一的方法）是将FlashMessage 组件包装在card 中并给它一些高海拔（比如1000）。请注意，提供给它的海拔应该是所有使用的卡片中最大的。