React Native Alert Dialog背景消失问题求助（Expo开发）

我是React Native新手，正在使用Expo开发APP。目前遇到React Native的Alert弹窗背景消失的问题，不清楚原因，也不知道该如何修改。请问有人遇到过这个问题吗？

问题截图 #

package.json配置 #

{
  "name": "educal-app",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "prepare": "husky install",
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.json",
    "lint-and-fix": "eslint . --ext .ts,.tsx,.js,.jsx,.json --fix"
  },
  "dependencies": {
    "@ethersproject/shims": "^5.6.0",
    "@expo/vector-icons": "^13.0.0",
    "@react-native-community/checkbox": "^0.5.12",
    "@react-native-community/slider": "4.2.1",
    "@react-native-picker/picker": "2.4.0",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "@reduxjs/toolkit": "^1.8.2",
    "@rneui/base": "^4.0.0-rc.5",
    "@rneui/themed": "^4.0.0-rc.5",
    "@thetalabs/theta-js": "^0.0.67",
    "@tradle/react-native-http": "^2.0.1",
    "assert": "^1.5.0",
    "axios": "^0.27.2",
    "bignumber.js": "^9.1.0",
    "browserify-zlib": "^0.1.4",
    "buffer": "^6.0.3",
    "console-browserify": "^1.2.0",
    "constants-browserify": "^1.0.0",
    "dns.js": "^1.0.1",
    "domain-browser": "^1.2.0",
    "ethers": "^5.6.9",
    "events": "^1.1.1",
    "expo": "~45.0.0",
    "expo-av": "~11.2.3",
    "expo-checkbox": "~2.1.0",
    "expo-constants": "~13.1.1",
    "expo-document-picker": "~10.2.1",
    "expo-file-system": "~14.0.0",
    "expo-font": "~10.1.0",
    "expo-random": "^12.3.0",
    "expo-secure-store": "~11.2.0",
    "expo-splash-screen": "~0.15.1",
    "expo-standard-web-crypto": "^1.4.0",
    "expo-status-bar": "~1.3.0",
    "expo-updates": "~0.13.3",
    "expo-web-browser": "~10.2.1",
    "firebase": "^9.8.1",
    "formik": "^2.2.9",
    "https-browserify": "^0.0.1",
    "i": "^0.3.7",
    "lottie-react-native": "5.0.1",
    "metro": "^0.71.0",
    "npm": "^8.16.0",
    "papaparse": "^5.3.2",
    "path-browserify": "^0.0.0",
    "process": "^0.11.10",
    "punycode": "^1.4.1",
    "querystring-es3": "^0.2.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-anchor-carousel": "^4.0.1",
    "react-native-collapsible": "^1.6.0",
    "react-native-dialog": "^9.2.2",
    "react-native-get-random-values": "^1.8.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-level-fs": "^3.0.1",
    "react-native-loading-spinner-overlay": "^3.0.0",
    "react-native-os": "^1.2.6",
    "react-native-paper": "^4.12.1",
    "react-native-phone-input": "^1.3.4",
    "react-native-quick-base64": "^2.0.5",
    "react-native-quick-crypto": "^0.4.5",
    "react-native-rsa": "^0.0.3",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-svg": "12.3.0",
    "react-native-tcp": "^3.3.2",
    "react-native-udp": "^2.7.0",
    "react-native-virtualized-view": "^0.1.5",
    "react-native-web": "0.17.7",
    "react-native-webview": "11.18.1",
    "react-native-youtube-iframe": "^2.2.2",
    "react-redux": "^8.0.2",
    "readable-stream": "^1.0.33",
    "stream-browserify": "^1.0.0",
    "string_decoder": "^0.10.31",
    "timers-browserify": "^1.4.2",
    "tty-browserify": "^0.0.0",
    "url": "^0.10.3",
    "util": "^0.10.4",
    "victory-native": "^36.5.3",
    "vm-browserify": "^0.0.4",
    "web3": "^1.7.5",
    "yup": "^0.32.11",
    "expo-clipboard": "~3.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@commitlint/cli": "^17.0.3",
    "@commitlint/config-conventional": "^17.0.3",
    "@typescript-eslint/eslint-plugin": "^5.30.6",
    "@typescript-eslint/parser": "^5.30.6",
    "eslint": "^8.20.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.30.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "husky": "^7.0.0",
    "node-libs-react-native": "^1.2.1",
    "prettier": "^2.7.1",
    "react-native-svg-transformer": "^1.0.0",
    "reactotron-react-native": "^5.0.2"
  },
  "private": true,
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "eslint --fix"
    ]
  }
}

解决方案参考 #

1. 排查UI库样式覆盖问题 #

你项目中引入了react-native-paper和@rneui/themed，这类UI库可能会覆盖原生Alert的默认样式。可以：

• 暂时注释掉UI库的全局初始化代码，测试原生Alert是否恢复正常
• 如果用react-native-paper的Dialog替代原生Alert，手动指定背景样式：

import { Dialog } from 'react-native-paper';

<Dialog visible={visible} onDismiss={hideDialog}>
  <Dialog.Content style={{ backgroundColor: '#ffffff' }}>
    <Dialog.Title>提示</Dialog.Title>
    <Dialog.Description>弹窗内容</Dialog.Description>
  </Dialog.Content>
</Dialog>

2. 升级Expo版本修复兼容性bug #

你当前使用的Expo 45（对应RN 0.68.2）在部分Android设备上存在原生Alert背景显示异常的已知问题，可尝试升级到稳定版本：

expo upgrade 46

升级后同步更新相关依赖，再测试弹窗显示效果。

3. 检查全局样式或Modal干扰 #

搜索项目中是否有修改Modal组件全局样式的代码，比如设置了backgroundColor: 'transparent'，这类配置可能会影响Alert的背景渲染，暂时注释后测试。

4. 改用第三方弹窗库 #

如果以上方法无效，直接使用你已安装的react-native-dialog替代原生Alert，样式可控性更强：

import Dialog from 'react-native-dialog';

// 组件内使用示例
<Dialog.Container visible={visible}>
  <Dialog.Title>提示</Dialog.Title>
  <Dialog.Description>自定义弹窗内容</Dialog.Description>
  <Dialog.Button label="确定" onPress={() => setVisible(false)} />
</Dialog.Container>

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