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, // 将弹窗内容居中显示
});
效果图和上面一致