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" />放在card组件里面就解决了，但是我全局启用了FlashMessage，所以想全局改，不想在每个card组件里面都放

Answer 1

所以经过一些搜索，我发现虽然 react-native-flash-message 不是以那种方式制作的，但可以呈现在 card、modals 或 [=13= 等所有内容之上].

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

React-native-flash-message 获取卡片

React-native-flash-message getting under the Card

react-native

react-native-paper

react-native-flash-message