react native alert 封装小组件

介绍

无聊时封装的小组件

参数名	默认值	解释
show	Boolean:false	弹窗显示/隐藏
title	String:Warning	标题
body	String:''	内容
type	String:alert/confirm	alert：单个按钮/confirm：两个按钮
buttonTitle	String:Ok	第一个按钮标题
buttonTwoTitle	String:Candle	第二个按钮标题
buttonBgColor	String:#FFCE03	第一个按钮背景色

import React, {useState} from 'react';
import {Overlay, Text, Button, View} from 'react-native-elements';

const Message = (params) => {
  const [overlay, setOverlay] = useState(params.show ? params.show : false);
  let type = params.type ? params.type : 'alert'; // button type
  let buttonTitle = params.buttonTitle ? params.buttonTitle : 'OK'; // first button title
  let buttonTwoTitle = params.buttonTwoTitle ? params.buttonTwoTitle : 'Candle'; //last button title
  let buttonBgColor = params.buttonBgColor ? params.buttonBgColor : '#FFCE03'; // first button background color

  console.log(params);
  return (
    <Overlay
      key={1}
      isVisible={overlay}
      overlayStyle={{
        borderRadius: 10,
        width: 309,
        height: 420,
        alignItems: 'center',
        justifyContent: 'center',
      }}
      onBackdropPress={() => setOverlay(!overlay)}>
      <Text h2 style={{textAlign: 'center'}}>
        {params.title ? params.title : 'Warning'}
      </Text>
      <Text
        style={{
          textAlign: 'center',
          fontSize: 19,
          padding: 20,
        }}>
        {params.body && params.body}
      </Text>

      {type == 'alert' || type == 'confirm' ? (
        <Button
          title={buttonTitle}
          titleStyle={{color: 'black', fontWeight: 'bold'}}
          onPress={() => setOverlay(!overlay)}
          buttonStyle={{
            backgroundColor: buttonBgColor,
            width: 168,
            height: 48,
            borderRadius: 60,
          }}
          borderRadius={60}></Button>
      ) : null}
      {type != 'alert' ? (
        <Button
          title={buttonTwoTitle}
          titleStyle={{color: 'black', fontWeight: 'bold'}}
          onPress={() => setOverlay(!overlay)}
          buttonStyle={{
            backgroundColor: '#FFFFFF',
            width: 168,
            borderWidth: 1,
            borderColor: '#D9D9D9',
            marginTop: 20,
            height: 48,
            borderRadius: 60,
          }}
          borderRadius={60}></Button>
      ) : null}
    </Overlay>
  );
};
export default Message;

有任何问题在下方留言