如何在React Native函数式组件中使用Awesome Alert

1. Awesome Alert并非只能用于类组件 #

Awesome Alert本质是标准React组件，完全支持在函数式组件中使用，核心是通过状态控制弹窗的显示与隐藏，和类组件的使用逻辑一致，不存在只能用于类组件的限制。

2. 函数式组件中的实现方式 #

基础用法（状态控制显示） #

在函数式组件中，使用useState钩子管理弹窗的显示状态，示例代码如下：

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import AwesomeAlert from 'react-native-awesome-alerts';

export default function App() {
  const [showAlert, setShowAlert] = useState(false);

  const showAlertHandler = () => {
    setShowAlert(true);
  };

  const hideAlertHandler = () => {
    setShowAlert(false);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="显示弹窗" onPress={showAlertHandler} />
      
      <AwesomeAlert
        show={showAlert}
        showProgress={false}
        title="自定义弹窗"
        message="这是我的自定义弹窗内容！"
        closeOnTouchOutside={false}
        closeOnHardwareBackPress={false}
        showCancelButton={true}
        showConfirmButton={true}
        cancelText="拒绝"
        confirmText="同意"
        confirmButtonColor="#AEDEF4"
        cancelButtonColor="#DD6B55"
        onCancelPressed={() => {
          console.log("拒绝");
          hideAlertHandler();
        }}
        onConfirmPressed={() => {
          console.log("同意");
          hideAlertHandler();
        }}
      />
    </View>
  );
}

封装成类似原生Alert的调用方式 #

如果想要像React Native原生Alert.alert()那样直接调用，无需在组件内写弹窗JSX，可以封装自定义钩子或全局组件：

方法一：自定义钩子封装

import { useState, useCallback } from 'react';
import AwesomeAlert from 'react-native-awesome-alerts';

export const useAwesomeAlert = () => {
  const [alertConfig, setAlertConfig] = useState({
    show: false,
    title: '',
    message: '',
    cancelText: '取消',
    confirmText: '确认',
    onCancel: () => {},
    onConfirm: () => {}
  });

  const showAlert = useCallback((config) => {
    setAlertConfig({
      ...alertConfig,
      show: true,
      ...config
    });
  }, [alertConfig]);

  const hideAlert = useCallback(() => {
    setAlertConfig(prev => ({ ...prev, show: false }));
  }, []);

  const AlertComponent = useCallback(() => (
    <AwesomeAlert
      show={alertConfig.show}
      showProgress={false}
      closeOnTouchOutside={false}
      closeOnHardwareBackPress={false}
      showCancelButton={true}
      showConfirmButton={true}
      cancelText={alertConfig.cancelText}
      confirmText={alertConfig.confirmText}
      confirmButtonColor="#AEDEF4"
      cancelButtonColor="#DD6B55"
      onCancelPressed={() => {
        alertConfig.onCancel();
        hideAlert();
      }}
      onConfirmPressed={() => {
        alertConfig.onConfirm();
        hideAlert();
      }}
      title={alertConfig.title}
      message={alertConfig.message}
    />
  ), [alertConfig, hideAlert]);

  return { showAlert, AlertComponent };
};

在组件中使用封装后的钩子：

import React from 'react';
import { View, Button } from 'react-native';
import { useAwesomeAlert } from './useAwesomeAlert';

export default function App() {
  const { showAlert, AlertComponent } = useAwesomeAlert();

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button 
        title="调用弹窗" 
        onPress={() => {
          showAlert({
            title: '自定义弹窗',
            message: '这是封装后的弹窗调用',
            cancelText: '拒绝',
            confirmText: '同意',
            onCancel: () => console.log('拒绝'),
            onConfirm: () => console.log('同意')
          });
        }} 
      />
      <AlertComponent />
    </View>
  );
}

方法二：全局弹窗组件（可选）

若要在全局任意位置调用，可将弹窗组件放在App最外层，通过React Context控制显示状态，实现和原生Alert完全一致的调用体验。

总结 #

Awesome Alert完全兼容函数式组件，核心是通过React状态控制显示；若需要类似原生Alert的调用方式，通过自定义钩子或全局组件封装即可实现。

内容的提问来源于stack exchange，提问作者Srhjhr