如何封装React-Native Alert以自动使用上下文的colorScheme

核心思路 #

Alert.alert是静态方法，无法直接内部调用useTheming这类Hook（Hook仅允许在组件函数或自定义Hook中使用），因此需要通过全局存储主题状态的方式，让静态方法能访问到当前的colorScheme。

实现步骤 #

1. 创建主题状态管理器 #

编写全局状态存储工具，用于同步上下文的colorScheme：

// theme-context-helper.ts
let currentColorScheme: 'light' | 'dark' | undefined = 'light'; // 设置默认值避免首次为空

export const setColorScheme = (scheme: 'light' | 'dark') => {
  currentColorScheme = scheme;
};

export const getColorScheme = () => {
  return currentColorScheme;
};

2. 在主题Provider中同步状态 #

在你的主题Provider组件内，获取colorScheme并同步到全局存储：

// ThemeProviderWrapper.tsx
import { useTheming } from '@react-navigation/native'; // 以react-navigation主题为例，可替换为你的主题库
import { useEffect } from 'react';
import { setColorScheme } from './theme-context-helper';

export const ThemeProviderWrapper = ({ children }) => {
  const { colorScheme } = useTheming();

  useEffect(() => {
    setColorScheme(colorScheme);
  }, [colorScheme]);

  return <>{children}</>;
};

将这个Wrapper包裹在App根组件外层，确保全局主题状态能实时同步。

3. 封装自定义Alert组件 #

在自定义Alert的静态方法中，获取全局colorScheme并自动注入到参数中：

// CustomAlert.ts
import { Alert as RNAlert, AlertOptions, Button } from 'react-native';
import { getColorScheme } from './theme-context-helper';

export class Alert {
  static alert(
    title: string,
    message?: string,
    buttons?: Button[],
    options?: AlertOptions
  ) {
    const colorScheme = getColorScheme();
    // 优先使用用户传入的userInterfaceStyle，否则自动注入全局主题
    const mergedOptions = {
      ...options,
      userInterfaceStyle: options?.userInterfaceStyle || colorScheme,
    };

    RNAlert.alert(title, message, buttons, mergedOptions);
  }

  static prompt(
    title: string,
    message?: string,
    callbackOrButtons?: ((text: string) => void) | Button[],
    type?: RNAlert.AlertType,
    defaultValue?: string,
    keyboardType?: string,
    options?: AlertOptions
  ) {
    const colorScheme = getColorScheme();
    const mergedOptions = {
      ...options,
      userInterfaceStyle: options?.userInterfaceStyle || colorScheme,
    };

    RNAlert.prompt(title, message, callbackOrButtons, type, defaultValue, keyboardType, mergedOptions);
  }
}

4. 使用自定义Alert #

项目中直接导入自定义Alert即可，无需手动传入userInterfaceStyle：

import { Alert } from './CustomAlert';

// 使用示例
Alert.alert(t`logout`, "Are you sure you want to logout?", [
  { text: "No" },
  {
    style: "destructive",
    text: "Yes",
    onPress: logoutAsync,
  },
]);

注意事项 #

• 若使用的主题库不是react-navigation的useTheming，只需在对应主题Provider中调用setColorScheme同步状态即可，核心逻辑通用。
• 全局存储的默认值可根据App初始主题设置，避免首次调用Alert时参数为空。

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