如何将React Native的alert弹窗设置为在屏幕底部显示

React Native 默认提供的Alert接口本质是调用系统原生的弹窗组件，并不是由RN的JS层渲染的视图元素，所以你在JS层写的任何样式规则都无法作用到原生弹窗上，系统默认的Alert就是固定居中展示的，没有开放修改位置的配置项。
你截图中的就是iOS系统原生的Alert弹窗：

方案1：使用自定义JS弹窗组件（最通用，双端效果一致） #

放弃系统原生Alert，自己用RN的基础组件实现自定义弹窗，或者使用成熟的第三方弹窗库，完全自己控制样式、位置：

• 可以用react-native-modal这类第三方模态框组件封装，设置position: absolute、bottom等样式即可生效
• 简单实现代码示例：

import { View, Text, Modal, TouchableOpacity, StyleSheet } from 'react-native';
import { useState } from 'react';

const CustomBottomAlert = () => {
  const [alertVisible, setAlertVisible] = useState(false);

  return (
    <View>
      <TouchableOpacity onPress={() => setAlertVisible(true)}>
        <Text>打开底部弹窗</Text>
      </TouchableOpacity>
      <Modal
        visible={alertVisible}
        transparent={true}
        animationType="fade"
        onRequestClose={() => setAlertVisible(false)}
      >
        {/* 半透明遮罩层 */}
        <View style={styles.maskLayer}>
          {/* 底部弹窗内容区 */}
          <View style={styles.alertContainer}>
            <Text style={styles.alertTitle}>提示</Text>
            <Text style={styles.alertContent}>这是显示在屏幕底部的自定义弹窗</Text>
            <TouchableOpacity 
              style={styles.confirmBtn}
              onPress={() => setAlertVisible(false)}
            >
              <Text style={styles.confirmBtnText}>确认</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  )
}

const styles = StyleSheet.create({
  maskLayer: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    // 核心配置：子元素从底部开始排列
    justifyContent: 'flex-end',
  },
  alertContainer: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    paddingHorizontal: 20,
    paddingVertical: 24,
    marginBottom: 20,
    marginHorizontal: 16,
  },
  alertTitle: {
    fontSize: 17,
    fontWeight: '600',
    marginBottom: 12,
  },
  alertContent: {
    fontSize: 15,
    color: '#333',
    marginBottom: 20,
  },
  confirmBtn: {
    paddingVertical: 12,
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  confirmBtnText: {
    fontSize: 16,
    color: '#007aff',
  }
})

方案2：iOS端单独定制原生模块（仅iOS生效，不推荐） #

如果必须保留原生Alert的交互体验，可以单独编写iOS原生模块，修改系统UIAlertController的弹出样式，自定义弹窗的位置偏移，该方案仅适配iOS，安卓端需要单独做原生定制，维护成本较高，不推荐使用。

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