强大易用的React Native全局闪现消息组件 - react-native-flash-message

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { FlashMessage } from 'react-native-flash-message';
 
const App = () => {
  // 假设这是你的函数，用于处理消息
  const handleMessage = (message) => {
    FlashMessage.showMessage({
      message: message,
      type: "default", // 可以是: success, warning, info, error
      duration: 3000, // 持续时间，默认为3000ms
    });
  };
 
  return (
    <View style={styles.container}>
      {/* 其他UI组件 */}
      <FlashMessage position="top" /> {/* 位于顶部的消息 */}
      <FlashMessage position="bottom" /> {/* 位于底部的消息 */}
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
 
export default App;

这个代码示例展示了如何在React Native应用中使用react-native-flash-message库来显示全局的闪现消息。handleMessage函数用于通过FlashMessage.showMessage方法显示消息，并且可以指定消息的类型和持续时间。在UI组件中，我们添加了<FlashMessage position="top" />和<FlashMessage position="bottom" />来分别在顶部和底部显示消息。