RN封装的toast提示框组件(含第三方库)

import React, {useState} from 'react';
import {
  View,
  Text,
  Modal,
  ActivityIndicator,
  StyleSheet,
  TouchableOpacity,
  Button,
} from 'react-native';

// 接收toaseflag为是否显示toast
// title为提示内容
const ToastModal = ({toastflag, title}) => {
  return (
    <Modal animationType="slide" transparent={true} visible={toastflag}>
      <View style={styles.modalContainer}>
        <View style={styles.modalContent}>
          <Text style={{color: '#FFFFFF'}}>{title}</Text>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    backgroundColor: 'black',
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 40,
    paddingRight: 40,
    borderRadius: 20,
    alignItems: 'center',
  },
});

export default ToastModal;

效果图

另外分享一个好用的toast第三方库

yarn add react-native-root-toast

使用

	import Toast from 'react-native-root-toast';


	Toast.show('弹窗内容', {
      duration: 2000  ,  // 显示时长
      position: Toast.positions.CENTER,  // 将弹窗内容居中显示
    });

效果图和上面一致