在 React Native 中，如何在 iOS 中将 KeyboardAvoidingView 与 Modal 一起使用？

Question

我无法让 KeyboardAvoidingView 在 iOS 中工作，特别是在其中包装 Modal 时。 在 Android 中测试，Modal 正确地避开了键盘，但在 iOS 中，键盘覆盖了 Modal。

这是一个可重现的示例，使用 iPhone X 作为我的测试设备：

import React, {useState} from 'react';
import {StyleSheet, ScrollView, View, Modal, TextInput, KeyboardAvoidingView, Button, SafeAreaView} from 'react-native';

export default function App() {
    const [modalVisible, setModalVisible] = useState(false);

    return (
        <View style={styles.container}>
            <Button title={"Open Modal"} onPress={() => setModalVisible(true)}/>
            {modalVisible && 
            <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}>
                <Modal
                    animationType="slide"
                    transparent={true}
                    visible={modalVisible}>
                    <SafeAreaView style={styles.safeAreaView}>
                        <View style={styles.modalContentContainer}>
                            <Button title={"Close Modal"} onPress={() => setModalVisible(false)}/>
                            <ScrollView>
                                <View style={styles.textInputContainer}>
                                    <TextInput
                                        value={"test 1"}
                                        onChangeText={() => {}}
                                        onBlur={() => {}}
                                    />
                                </View>
                                <View style={styles.textInputContainer}>
                                    <TextInput
                                        value={"test 2"}
                                        onChangeText={() => {}}
                                        onBlur={() => {}}
                                    />
                                </View>
                                <View style={styles.textInputContainer}>
                                    <TextInput
                                        value={"test 3"}
                                        onChangeText={() => {}}
                                        onBlur={() => {}}
                                    />
                                </View>
                                <View style={styles.textInputContainer}>
                                    <TextInput
                                        value={"test 4"}
                                        onChangeText={() => {}}
                                        onBlur={() => {}}
                                    />
                                </View>
                            </ScrollView>
                        </View>
                    </SafeAreaView>
                </Modal>
            </KeyboardAvoidingView>}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        paddingTop: 50
    },
    safeAreaView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
    },
    modalContentContainer: {
        margin: 100,
        backgroundColor: "#d6d6d6",
        width: "80%",
        height: "60%",
        borderRadius: 10,
    },
    textInputContainer: {
        flex: 1,
        margin: 40,
        alignItems: "center",
    }
});

您会注意到，当您打开 Modal 并点击最后一个 TextInput 字段时，键盘会出现并覆盖 Modal。 正如预期的那样，Modal 不会避开键盘。

这是我在 iOS 中测试的屏幕截图，但它不起作用：

这是我在 Android 中测试的屏幕截图，它正在运行：

关于如何使模态避免在 iOS 中使用键盘的任何想法？

Answer 1

您正在使用 KeyboardAvoidingView 包装您的 Modal。 我不确定这一点，但从我的测试来看，似乎不可能使用 KeyboardAvoidingView 调整 Modal 的大小。

因此，将 KeyboardAvoidingView 移动到 Modal 内部以获得预期的行为。 像这样：

return (
        <View style={styles.container}>
            <Button title={"Open Modal"} onPress={() => setModalVisible(true)}/>
            {modalVisible && 
                <Modal
                    animationType="slide"
                    transparent={true}
                    visible={modalVisible}>
                      <KeyboardAvoidingView behavior={"padding"} style={styles.safeAreaView}>
                        <View style={styles.modalContentContainer}>
                            <Button title={"Close Modal"} onPress={() => setModalVisible(false)}/>
                            <ScrollView>
                                <View style={styles.textInputContainer}>
                                    <TextInput
                                        value={"test 1"}
                                        onChangeText={() => {}}
                                        onBlur={() => {}}
                                    />
                                </View>
                                <View style={styles.textInputContainer}>
                                    <TextInput
                                        value={"test 2"}
                                        onChangeText={() => {}}
                                        onBlur={() => {}}
                                    />
                                </View>
                                <View style={styles.textInputContainer}>
                                    <TextInput
                                        value={"test 3"}
                                        onChangeText={() => {}}
                                        onBlur={() => {}}
                                    />
                                </View>
                                <View style={styles.textInputContainer}>
                                    <TextInput
                                        value={"test 4"}
                                        onChangeText={() => {}}
                                        onBlur={() => {}}
                                    />
                                </View>
                            </ScrollView>
                        </View>
                    </KeyboardAvoidingView>
                </Modal>}
        </View>
    );

我还删除了您的 SafeAreaView，因为它目前没有做任何事情。 您的父级已经居中，其内容永远不会到达设备的“不安全”区域。

您不妨从代码中删除{modalVisible && ...} ，因为visible={modalVisible}已经在需要时隐藏并显示了模态。

演示： https : //imgur.com/W7sEPpn

Answer 2

如果您使用的是react-native-modal包... avoidKeyboard属性可以解决问题...

import Modal from "react-native-modal";

return (
    <Modal
        avoidKeyboard
        /** rest props */
    >
        {/* Content goes here */}
    </Modal>
);