ios - 将 React Native 警报定位在屏幕底部

Question

React Native 警报默认显示在屏幕中央。我一直在尝试对其进行样式设置，使其显示在屏幕底部 - 但没有成功。有谁知道我会怎么做？我试过了position: absolute，bottom: 0但它仍然出现在中心。

标签： iosreact-nativealert

Answer 1

我已经尝试过了，让我知道它是否有助于根据图像进行设计。复制粘贴代码并尝试。

import React, { useState } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  Pressable,
  Modal,
  Dimensions,
  Button,
} from 'react-native';

const App = () => {
  const [showWarning, SetshowWarning] = useState(false);
  const onPressHandler = () => {
      SetshowWarning(true);
  }

  return (
    <View style={styles.body}>
      <Modal
        visible={showWarning}
        transparent
        onRequestClose={() =>
          SetshowWarning(false)
        }
        animationType='slide'
        hardwareAccelerated
      >
        <View style={styles.centered_view}>
          <View style={styles.warning_modal}>
            <View style={styles.warning_title}>
              <Text style={{
                color: '#000000',
                fontSize: 25,
                fontWeight:'700',
                textAlign: 'center',
              }}>Unsaved Changes</Text>
              <Text style={styles.text}>Are you sure you want to continue?</Text>
            </View>
            <Pressable
              onPress={() => SetshowWarning(false)}
              style={styles.warning_button1}
              android_ripple={{ color: '#fff' }}
            >
              <Text style={styles.textKE}>Keep Editing</Text>
            </Pressable>
            <Pressable
              onPress={() => SetshowWarning(false)}
              style={styles.warning_button}
              android_ripple={{ color: '#fff' }}
            >
              <Text style={styles.textDC}>Discard Changes</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      <Button onPress={() =>onPressHandler()} title="Text This"></Button>
      {/* Add Here full code */}
    </View >
  );
};

const styles = StyleSheet.create({
  body: {
    flex: 1,
    backgroundColor: '#ffffff',
    alignItems: 'center',
  },
  
  centered_view: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#00000099',
  },
  warning_modal: {
    width: Dimensions.get('window').width,
    height: 200,
    backgroundColor: '#eeff0f0',
    borderRadius: 20,
    top:"31%"
  },
  warning_title: {
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#eff0f0',
    borderTopRightRadius: 20,
    borderTopLeftRadius: 20,
    borderBottomWidth:1,
    borderColor:'grey'
  },
  warning_body: {
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textKE: {
    marginTop:20,
    color: '#1485fe',
    fontSize: 20,
    margin: 5,
    textAlign: 'center',
  },
  textDC: {
    marginTop:20,
    color: 'red',
    fontSize: 20,
    margin: 5,
    textAlign: 'center',
  },
  warning_button1: {
    height:70,
    backgroundColor: '#efeff0',
    borderBottomWidth:1,
    borderColor:'grey'
  },
  warning_button: {
    height:70,
    backgroundColor: '#efeff0',
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
  }
});

export default App;