为什么我无法整理我的单位列表？

Question

我有一个不会滚动的列表，请参见此处：

很明显，我的问题是，这是怎么回事？为什么我不能滚动列表？

基本上，列表是Stacknavigator的一部分，一部分是Tabnavigator的一部分。

Tabs.js

DisplayFor()

Menu.js

import React from 'react';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
import Ionicons from 'react-native-vector-icons/Ionicons'

import Home from 'app/views/home/Home'
import Menu from 'app/views/home/Menu'
import Common from 'app/views/pagetypes/Common'
import AppPage from 'app/views/pagetypes/AppPage'
import Map from 'app/views/map/Map'
import Vars from 'app/vars/Vars'


const MenuNav = createStackNavigator({
    Menu: { screen: Menu },
    AppPage: { screen: AppPage },
    Common: { screen: Common }
})

const Tabs = createBottomTabNavigator({
    Home: {
        screen: MenuNav,
        navigationOptions: {
            tabBarLabel: 'Hem',
        }
    },
    Map: { screen: Map,
    navigationOptions: {
        tabBarLabel: 'Karta',
    } }
}, {
    navigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, tintColor }) => {

            const { routeName } = navigation.state;
            let iconName;

            if (routeName === 'Home') {
                iconName = `ios-home${focused ? '' : '-outline'}`;
            } else if (routeName === 'Map') {
                iconName = `ios-map${focused ? '' : '-outline'}`;
            }

            // You can return any component that you like here! We usually use an
            // icon component from react-native-vector-icons
            return <Ionicons name={iconName} size={24} color={tintColor} />;
        },
    }),
    tabBarOptions: {
        activeTintColor: Vars.colors.primary,
        inactiveTintColor: 'gray',
    }
})

export default Tabs;

Styles.js

import React from 'react'
import { StyleSheet, Text, View, FlatList, ActivityIndicator } from 'react-native'
import { ListItem } from 'react-native-elements'
import { StackActions } from 'react-navigation'

import Styles from 'app/styles/Styles'
import Vars from 'app/vars/Vars'


export default class Menu extends React.Component {

    static navigationOptions = ({ navigation }) => {

        console.log('navigation', navigation);

        return {
            title: navigation.getParam('title', ''),
            headerStyle: Styles.header,
            headerTintColor: Vars.colors.primary,
            headerTitleStyle: Styles.headerTitle,
        };
    };


    constructor(props) {
        super(props)

        this.state = {
            loading: true,
            id: props.navigation.getParam('id', null),
            data: [],
            error: null,
            loadingMessage: 'Laddar innehåll...',
        };
    }

    getMenu = () => {

        let url = global.apiUrl + '/api/menu/';

        this.setState({ loading: true });

        fetch(url)
            .then(res => res.json())
            .then(res => {
                this.setState({
                    data: res,
                    error: res.error || null,
                    loading: false,
                });
            })
            .catch(error => {
                //this.setState({ error, loading: false });
                this.setState({loadingMessage: 'Innehållet kunde ej laddas'});
            });
    }

    onItemPress = (item) => {

        let next;



        if(item.children.length > 0) {
            next = StackActions.push({
                routeName: 'Menu',
                params: {
                    children: item.children,
                    title: item.title
                },
            });
        } else {

            let type = item.page_data.page_type_id;
            let route = '';
            switch (type) {
                case 1:
                    route = 'Common'
                    break;
                case 2:
                    route = 'AppPage'
                    break;
                default:
                    route = 'Common'
            }

            next = StackActions.push({
                routeName: route,
                params: {
                    page: item.page_data,
                    title: item.title
                },
            });
        }

        this.props.navigation.dispatch(next);

    }


    renderListItem = ({ item }) => {

        return(
            <ListItem
                title = {item.title}
                id = {item.id}
                leftIcon={{
                    name: item.icon,
                    style: Styles.listitemIcon,
                    size: 36,
                }}
                onPress = {() => { this.onItemPress(item)}}
                style = { Styles.listItem }
                titleStyle = { Styles.listitemTitle }
            ></ListItem>
        )
    }

    renderFooter = () => {


      return (
        <View style={Styles.verticalSpace}>
          <ActivityIndicator animating size="large" />
          <Text style={Styles.textCenter}>
              {this.state.loadingMessage}
          </Text>
        </View>
      );
    };

    renderHeader = () => {

     console.log('RenderHeader');



      return (
          <View style={Styles.hero}>
            <Text style={[Styles.h1, Styles.whiteText]}>
                Region Halland
            </Text>

            <Text style={[Styles.lead, Styles.whiteText]}>
                Välkommen
            </Text>
        </View>
      );
    };

componentDidMount() {

    if(this.props.navigation.getParam('children')) {
        this.setState({
            data: this.props.navigation.getParam('children'),
            error: null,
            loading: false,
        })
    } else {
        this.getMenu();
    }
}

  render() {
    return (

        <FlatList
          data = { this.state.data }
          style = {Styles.list}
          contentContainerStyle = {Styles.container}
          keyExtractor = {item => "key_"+item.id}
          renderItem = { this.renderListItem }
      />

    );
  }
}