Javascript React本机FlatList在flexbox UI中不滚动

我花了几个小时试图理解为什么我的平面列表拒绝滚动。我看到了很多关于将“flexGrow:1”添加到列表的contentContainerStyle道具的解决方案，但遗憾的是，这并不能解决我的问题。我也尝试过在样式道具中使用flex/flexGrow:1的许多变体，但仍然没有滚动。我附加此页面的代码：

import React, { Component } from "react";
import { Dimensions, FlatList, View, StyleSheet, TouchableOpacity } from "react-native";
import { Button, Block, Text } from "galio-framework";
import Theme from "../../constants/Theme";
import { StatusBar } from "expo-status-bar";
import MapView, { PROVIDER_GOOGLE } from "react-native-maps";
import SvgCarIcon from "../../components/SvgCarIcon";
import DashIcons from "../../components/DashIcons";

export default class MakePayment extends Component {
    constructor(props) {
        super(props);
        this.state = {
            source: {
                latitude: 0,
                longitude: 0,
                latitudeDelta: 0.005,
                longitudeDelta: 0.005
            },
            rideOptions: [
                {
                    title: "Ride A",
                    passengers: 4,
                    arrivalTime: "10:00 - 10:07 arrival",
                    price: "5.00",
                    isSelected: false
                },
                {
                    title: "Ride B",
                    passengers: 7,
                    arrivalTime: "10:00 - 10:07 arrival",
                    price: "7.50",
                    isSelected: false
                },
                {
                    title: "Ride C",
                    passengers: 6,
                    arrivalTime: "12:00 - 13:30 arrival",
                    price: "3.50",
                    isSelected: false
                }
            ]
        };
    }

    toggleOption = (INDEX) => {
        let updatedRideOptions = this.state.rideOptions.slice().map((item, index) => {
            INDEX === index ? item["isSelected"] = !item["isSelected"] : item["isSelected"] = false
            return item;
        })
        this.setState({rideOptions: updatedRideOptions}, () => console.log(this.state.rideOptions));
    }

    componentDidMount() {
        let { lat, lng } = this.props.route.params.source.geometry.location;
        this.setState({
            source: {
                ...this.state.source,
                latitude: lat,
                longitude: lng
            }
        }, () => console.log(this.state.source));
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar hidden/>
                <MapView
                    provider={PROVIDER_GOOGLE}
                    showsCompass={true}
                    showsUserLocation={true}
                    style={styles.map}
                    initialRegion={{
                        latitude: 37.78825,
                        longitude: -122.4324,
                        latitudeDelta: 0.0922,
                        longitudeDelta: 0.0421
                    }}
                    region={this.state.source}
                />
                <View style={styles.menuContainer}>
                    <Text style={styles.header}>Time To Pick A Dash!</Text>
                    <FlatList
                        contentContainerStyle={{
                            width: "90%",
                            flexGrow: 1,
                            alignItems: "center",
                            borderColor: "red",
                            borderStyle: "solid",
                            borderWidth: 2
                        }}
                        scrollEnabled={true}
                        keyExtractor={((item, index) => String(index))}
                        data={this.state.rideOptions}
                        renderItem={({ item , index}) => {
                            return (
                                <TouchableOpacity
                                    activeOpacity={0.9}
                                    style={[styles.dashRideBox, item.isSelected && styles.btnSelected]}
                                    onPress={() => this.toggleOption(index)}
                                >
                                    <SvgCarIcon color={item.isSelected ? Theme.COLOURS.WHITE : Theme.COLOURS.SECONDARY}/>
                                    <Block style={{ paddingRight: 25 }}>
                                        <Text size={18} color={item.isSelected ? Theme.COLOURS.WHITE : Theme.COLOURS.SECONDARY}>{item.title}&nbsp;
                                            <Text small style={item.isSelected && styles.textSelected}>{item.passengers}</Text>
                                        </Text>
                                        <Text size={14} style={item.isSelected ? styles.textSelected : styles.subText}>{item.arrivalTime}</Text>
                                    </Block>
                                    <Text color={item.isSelected ? Theme.COLOURS.WHITE : Theme.COLOURS.SECONDARY} size={24}>{item.price}</Text>
                                </TouchableOpacity>
                            );
                        }}
                    />
                </View>
                <Block style={styles.paymentContainer}>
                    <Block style={{
                        flex: 0.4, flexDirection: "row", alignItems: "center"
                    }}>
                        <Block style={styles.card}>
                            <DashIcons name={"visa"} size={40}/>
                            <Text size={14} color={Theme.COLOURS.SUB_TEXT} bold>VISA ***** 4700</Text>
                            <TouchableOpacity
                                style={{
                                    flex: 1,
                                    alignItems: "center"
                                }}
                                onPress={() => console.log("Card drop down opened...")}
                            >
                                <DashIcons name={"dropdown-arrow"} size={14} color={"grey"}/>
                            </TouchableOpacity>
                        </Block>
                        <Button style={styles.recent}>
                            <DashIcons name={"clock"} size={22}/>
                        </Button>
                    </Block>
                    <Button style={styles.confirmBtn} color={"#F2F2F2"}>
                        <Text size={24} color={Theme.COLOURS.SECONDARY}>Confirm your dash</Text>
                    </Button>
                </Block>
            </View>
        );
    }
}
const { width: WIDTH } = Dimensions.get("window"); //Max Width of phone screen
const { height: HEIGHT } = Dimensions.get("window");

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        fontFamily: "Roboto",
        backgroundColor: Theme.COLOURS.WHITE
    },
    menuContainer: {
        flex: 0.3,
        justifyContent: "space-between",
        alignItems: "center",
        width: "100%",
        paddingHorizontal: 10,
        elevation: 1
    },
    dashRideBox: {
        flexGrow: 0.475,
        backgroundColor: Theme.COLOURS.WHITE,
        width: "100%",
        paddingHorizontal: 5,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        borderRadius: 10,
        elevation: 3,
        shadowRadius: 10
    },
    map: {
        flex: 0.45,
        width: WIDTH
    },
    paymentContainer: {
        marginTop: 10,
        flex: 0.25,
        paddingHorizontal: 10,
        justifyContent: "center",
        alignItems: "center",
        borderStyle: "solid",
        borderWidth: 2,
        borderColor: "rgba(0,0,0,0.1)"
    },
    header: {
        fontWeight: "bold",
        fontSize: 18,
        color: Theme.COLOURS.SUB_HEADER,
        paddingVertical: 10
    },
    subText: {
        color: Theme.COLOURS.SUB_TEXT
    },
    card: {
        flex: 0.7,
        height: 45,
        flexDirection: "row",
        justifyContent: "flex-start",
        alignItems: "center",
        borderRadius: 30,
        backgroundColor: Theme.COLOURS.WHITE,
        elevation: 5,
        paddingLeft: 10
    },
    recent: {
        flex: 0.3,
        borderRadius: 30,
        backgroundColor: Theme.COLOURS.WHITE,
        elevation: 5,
    },
    confirmBtn: {
        flex: 0.6,
        width: 343,
        borderRadius: 30,
        elevation: 3
    },
    btnSelected: {
        backgroundColor: Theme.COLOURS.BUTTON
    },
    textSelected: {
        color: Theme.COLOURS.WHITE
    }
})

import React，{Component}来自“React”；
从“react native”导入{维度、平面列表、视图、样式表、TouchableOpacity}；
从“galio框架”导入{按钮、块、文本}；
从“../../constants/Theme”导入主题；
从“世博会状态栏”导入{StatusBar}；
从“react native maps”导入MapView，{PROVIDER_GOOGLE}；
从“../../components/SvgCarIcon”导入SvgCarIcon；
从“../../components/DashIcons”导入DashIcons；
导出默认类MakePayment扩展组件{
建造师（道具）{
超级（道具）；
此.state={
资料来源：{
纬度：0，
经度:0,，
纬度德尔塔：0.005，
纵向德尔塔：0.005
},
驾驶选项：[
{
标题：“骑A”，
乘客:4,，
到达时间：“10:00-10:07到达”，
价格：“5.00”，
结果：错
},
{
标题：“骑乘B”，
乘客:7,，
到达时间：“10:00-10:07到达”，
价格：“7.50”，
结果：错
},
{
标题：“骑乘C”，
乘客:6,，
到达时间：“12:00-13:30到达”，
价格：“3.50”，
结果：错
}
]
};
}
toggleOption=（索引）=>{
让UpdatedVideoptions=this.state.rideOptions.slice（）.map（（项，索引）=>{
索引===索引？项目[“isSelected”]=！项目[“isSelected”]：项目[“isSelected”]=错误
退货项目；
})
this.setState（{rideOptions:updatedVideoptions}，（）=>console.log（this.state.rideOptions））；
}
componentDidMount（）{
设{lat，lng}=this.props.route.params.source.geometry.location；
这是我的国家({
资料来源：{
…此.state.source，
纬度：纬度，
经度：液化天然气
}
}，（）=>console.log（this.state.source））；
}
render（）{
返回(
是时候开始冲刺了！
字符串（索引））}
数据={this.state.rideOptions}
renderItem={（{item，index}）=>{
返回(
this.toggleOption（index）}
>
{item.title}
{项目.乘客}
{item.arrivalTime}
{item.price}
);
}}
/>
签证号：****4700
console.log（“打开了卡下拉列表…”）
>
确认你的破折号
);
}
}
const{width:width}=Dimensions.get（“窗口”）//手机屏幕的最大宽度
const{height:height}=Dimensions.get（“窗口”）；
const styles=StyleSheet.create({
容器：{
弹性：1，
辩护内容：“中心”，
对齐项目：“中心”，
fontFamily：“机器人”，
背景颜色：Theme.colors.WHITE
},
菜单容器：{
弹性系数：0.3，
辩护内容：“间隔空间”，
对齐项目：“中心”，
宽度：“100%”，
水平方向：10，
标高：1
},
仪表盘盒：{
flexGrow:0.475，
背景颜色：Theme.colors.WHITE，
宽度：“100%”，
填充水平面：5，
flexDirection:“行”，
辩护内容：“间隔空间”，
对齐项目：“中心”，
边界半径：10，
标高：3，
阴影半径：10
},
地图：{
弹性系数：0.45，
宽度：宽度
},
付款容器：{
玛金托普：10，
弹性系数：0.25，
水平方向：10，
辩护内容：“中心”，
对齐项目：“中心”，
边框样式：“实心”，
边界宽度：2，
边框颜色：“rgba（0,0,0,0.1）”
},
标题：{
fontWeight：“粗体”，
尺码：18，
颜色：Theme.colors.SUB_标题，
填充垂直：10
},
潜台词：{
颜色：Theme.colors.SUB_文本
},
卡片：{
弹性系数：0.7，
身高：45，
flexDirection:“行”，
justifyContent:“灵活启动”，
对齐项目：“中心”，
边界半径：30，
背景颜色：Theme.colors.WHITE，
标高：5，
paddingLeft:10
},
最近：{
弹性系数：0.3，
边界半径：30，
背景颜色：Theme.colors.WHITE，
标高：5，
},
确认：{
弹性系数：0.6，
宽度：343，
边界半径：30，
高程：