javascript - 在 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 调整模态框的大小。
因此，将 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，因为它目前没有做任何事情。您的 parent 已经居中，其内容将永远不会到达设备的“不安全”区域。
您不妨删除 {modalVisible && ...}来自您的代码，因为 visible={modalVisible}已经隐藏并在需要时显示模态。
演示:
https://imgur.com/W7sEPpn