React Native中如何在Android显示厂商风格的系统弹窗？

React Native原生的Alert.alert()调用的是Android系统默认的AlertDialog组件，它不会自动适配三星OneUI这类厂商定制的UI风格。要实现需求，可以通过以下几种方式：

1. 使用第三方UI库 #

一些成熟的React Native UI组件库提供了可定制或已适配厂商风格的弹窗：

• react-native-paper：部分组件会适配系统主题，在三星设备上可能自动贴近OneUI风格；也可通过自定义主题调整弹窗的圆角、按钮排版等细节，匹配OneUI视觉特征。
• react-native-dialog：支持高度自定义，可手动配置弹窗的背景色、圆角、按钮样式，完全复刻OneUI弹窗的外观。

示例使用react-native-dialog实现类似OneUI风格的弹窗：

import React, { useState } from 'react';
import { Button } from 'react-native';
import Dialog from 'react-native-dialog';

export default function Test() {
  const [visible, setVisible] = useState(false);

  const showDialog = () => {
    setVisible(true);
  };

  const handleClose = () => {
    setVisible(false);
  };

  return (
    <>
      <Button title="show alert" onPress={showDialog} />
      <Dialog.Container visible={visible}>
        <Dialog.Title>Hello</Dialog.Title>
        <Dialog.Description>This is three option alert.</Dialog.Description>
        <Dialog.Button label="May be" onPress={handleClose} />
        <Dialog.Button label="Yes" onPress={handleClose} />
        <Dialog.Button label="No" onPress={handleClose} />
      </Dialog.Container>
    </>
  );
}

2. 编写原生Android模块 #

如果需要完全调用三星OneUI原生的Dialog组件，需要自定义React Native原生模块：

• 在Android项目中引入OneUI相关依赖（需确认设备预装情况或添加对应SDK）；
• 封装OneUI Dialog的调用逻辑为原生模块；
• 在React Native中通过NativeModules调用该模块，仅在三星OneUI设备上展示原生风格弹窗，其他设备可降级使用默认弹窗。

这种方式能完全匹配原生OneUI风格，但需要具备Android原生开发能力。

3. 自定义纯RN弹窗组件 #

手动实现一个自定义弹窗组件，通过StyleSheet配置圆角、阴影、按钮布局、文字样式，1:1复刻OneUI弹窗的视觉效果。这种方式不依赖原生组件，跨设备一致性强，但需要自行维护样式细节。

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