如何解决React Native中KeyboardAwareScrollView的键盘适配问题？

现有代码 #

import React from 'react';
import { View, SafeAreaView, StyleSheet, TextInput, Text, TouchableOpacity, Platform } from 'react-native';
import MapView, { UrlTile } from 'react-native-maps';
import tw from 'tailwind-react-native-classnames';
import { Card } from 'react-native-shadow-cards';
import { useNavigation } from '@react-navigation/native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const MapScreen = () => {

    const navigation = useNavigation();

    let location = {
        latitude: 5.354846154402075,
        longitude: 100.30152659738222,
        latitudeDelta: 0.001,
        longitudeDelta: 0.002
    }

    return (
        <SafeAreaView style={tw`bg-white h-full`}>

            <View style={tw`h-2/3`}>
                <MapView
                    style={styles.map}
                    mapType='standard'
                    region={location}>
                    <UrlTile
                        urlTemplate='https://api.maptiler.com/maps/openstreetmap/256/{z}/{x}/{y}.jpg?key=2fFGEOiBVDCSMRNfaU70'
                        shouldReplaceMapContent={true}>
                    </UrlTile>
                </MapView>
            </View>

            <KeyboardAwareScrollView
                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
                bounces={false}
                enableOnAndroid={true}
                scrollEnabled={true}
                enableAutomaticScroll={true}
                contentContainerStyle={{ flex: 1 }}>
                <View style={styles.cardContainer}>
                    <Card style={styles.cardView}>
                        <Text style={{ fontSize: 11, paddingTop: 10, paddingLeft: 10 }}>From</Text>
                        <View style={styles.inputBox}>
                            <TextInput
                                style={{ paddingVertical: 0, paddingLeft: 10 }}
                                placeholder='Current Location'
                                keyboardType='current-location'>
                            </TextInput>
                        </View>
                        <Text style={{ fontSize: 11, paddingTop: 10, paddingLeft: 10 }}>To</Text>
                        <View style={styles.inputBox}>
                            <TextInput
                                style={{ paddingVertical: 0, paddingLeft: 10 }}
                                placeholder='Destination'
                                keyboardType='destination'>
                            </TextInput>
                        </View>

                        <View>
                            <TouchableOpacity
                                onPress={() => navigation.navigate('ShowResultScreen')}
                                style={styles.button}>
                                <Text
                                    style={{
                                        textAlign: 'center',
                                        fontWeight: '700',
                                        fontSize: 17,
                                        color: '#fff'
                                    }}>
                                    Search
                                </Text>
                            </TouchableOpacity>
                        </View>
                    </Card>
                </View>
            </KeyboardAwareScrollView>

        </SafeAreaView>
    );

};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    map: {
        width: '100%',
        height: '100%',
    },
    cardContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 25,
        shadowOpacity: 0.8
    },
    cardView: {
        width: '97%',
        height: '95%',
        paddingLeft: 10,
        paddingTop: 3
    },
    button: {
        backgroundColor: '#5AA9E6',
        padding: 10,
        borderRadius: 10,
        marginTop: 15,
        marginRight: 10
    },
    inputBox: {
        borderRadius: 10,
        width: '97%',
        height: '15%',
        backgroundColor: '#F5F3F4',
        marginTop: 10
    }
});

export default MapScreen;

需求说明 #

希望下方输入区域在键盘弹出时可滚动且不被遮挡，确保输入完成后能点击Search按钮。已尝试改用KeyboardAwareScrollView替代KeyboardAvoidingView和ScrollView，但效果仍不符合预期。

解决方案 #

调整以下几个关键布局点即可解决问题：

1. 移除KeyboardAwareScrollView的contentContainerStyle={{ flex: 1 }}
   这个属性会强制内容撑满滚动容器，破坏键盘适配的自动调整逻辑。

2. 修改cardContainer和cardView的样式
   去掉固定高度和flex:1，改用padding让内容自然排布，避免布局挤压：

• cardContainer：移除flex:1和justifyContent: 'center'，添加上下padding
• cardView：移除固定height: '95%'，改用paddingBottom确保按钮下方有足够空间

3. 添加extraScrollHeight属性
   给KeyboardAwareScrollView设置extraScrollHeight={20}，让键盘弹出时额外滚动一段距离，保证Search按钮完全可见。

4. 调整inputBox的高度
   把百分比高度改为固定值（比如40），避免父容器高度变化导致输入框变形。

修改后的完整代码 #

import React from 'react';
import { View, SafeAreaView, StyleSheet, TextInput, Text, TouchableOpacity, Platform } from 'react-native';
import MapView, { UrlTile } from 'react-native-maps';
import tw from 'tailwind-react-native-classnames';
import { Card } from 'react-native-shadow-cards';
import { useNavigation } from '@react-navigation/native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const MapScreen = () => {

    const navigation = useNavigation();

    let location = {
        latitude: 5.354846154402075,
        longitude: 100.30152659738222,
        latitudeDelta: 0.001,
        longitudeDelta: 0.002
    }

    return (
        <SafeAreaView style={tw`bg-white flex-1`}>

            <View style={tw`h-2/3`}>
                <MapView
                    style={styles.map}
                    mapType='standard'
                    region={location}>
                    <UrlTile
                        urlTemplate='https://api.maptiler.com/maps/openstreetmap/256/{z}/{x}/{y}.jpg?key=2fFGEOiBVDCSMRNfaU70'
                        shouldReplaceMapContent={true}>
                    </UrlTile>
                </MapView>
            </View>

            <KeyboardAwareScrollView
                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
                bounces={false}
                enableOnAndroid={true}
                scrollEnabled={true}
                enableAutomaticScroll={true}
                extraScrollHeight={20}> {/* 添加额外滚动高度 */}
                <View style={styles.cardContainer}>
                    <Card style={styles.cardView}>
                        <Text style={{ fontSize: 11, paddingTop: 10, paddingLeft: 10 }}>From</Text>
                        <View style={styles.inputBox}>
                            <TextInput
                                style={{ paddingVertical: 0, paddingLeft: 10 }}
                                placeholder='Current Location'>
                            </TextInput>
                        </View>
                        <Text style={{ fontSize: 11, paddingTop: 10, paddingLeft: 10 }}>To</Text>
                        <View style={styles.inputBox}>
                            <TextInput
                                style={{ paddingVertical: 0, paddingLeft: 10 }}
                                placeholder='Destination'>
                            </TextInput>
                        </View>

                        <View>
                            <TouchableOpacity
                                onPress={() => navigation.navigate('ShowResultScreen')}
                                style={styles.button}>
                                <Text
                                    style={{
                                        textAlign: 'center',
                                        fontWeight: '700',
                                        fontSize: 17,
                                        color: '#fff'
                                    }}>
                                    Search
                                </Text>
                            </TouchableOpacity>
                        </View>
                    </Card>
                </View>
            </KeyboardAwareScrollView>

        </SafeAreaView>
    );

};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    map: {
        width: '100%',
        height: '100%',
    },
    cardContainer: {
        alignItems: 'center',
        paddingVertical: 15, // 添加上下内边距
        borderRadius: 25,
        shadowOpacity: 0.8
    },
    cardView: {
        width: '97%',
        paddingLeft: 10,
        paddingTop: 3,
        paddingBottom: 20 // 底部内边距，确保按钮不贴边
    },
    button: {
        backgroundColor: '#5AA9E6',
        padding: 10,
        borderRadius: 10,
        marginTop: 15,
        marginRight: 10
    },
    inputBox: {
        borderRadius: 10,
        width: '97%',
        height: 40, // 改用固定高度
        backgroundColor: '#F5F3F4',
        marginTop: 10,
        justifyContent: 'center' // 让输入内容垂直居中
    }
});

export default MapScreen;

补充说明 #

• 移除了keyboardType='current-location'和keyboardType='destination'，因为这两个不是有效的键盘类型，会导致警告，若需要特定键盘类型可改用default或其他有效值。
• SafeAreaView改用flex-1替代h-full，确保布局在不同设备上更适配。

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