ScreenshotScreenshot2

import React from 'react';
import { View, SafeAreaView, StyleSheet, TextInput, Text, TouchableOpacity, KeyboardAvoidingView, ScrollView } 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';

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>

            <ScrollView>
                <KeyboardAvoidingView
                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
                    enabled={false}
                    style={styles.container}>
                    <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>
                </KeyboardAvoidingView>
            </ScrollView>

        </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;

我想让下面的输入部分在键盘弹出时可以滚动，以便在键入所需的输入后可以按下搜索按钮。但是，当我添加滚动视图时，卡片的布局不符合格式，如屏幕截图所示。如何解决这个问题？