Flatlist listitem将不会显示标题？

Question

我有一个带有Listitems的Flatlist，通过组件中的prop进行填充。每当返回对服务器的调用时，父组件都会更改prop。但是，问题在于，每个项目的标题都不会显示。您只会得到如下所示的箭头。这是怎么回事，为什么ListItem无法获得屏幕/容器的完整宽度？

Menu.js

import React from 'react'
import { StyleSheet, Text, View, Image, ScrollView, FlatList, AsyncStorage, ActivityIndicator } from 'react-native'
import { ListItem } from 'react-native-elements'
import { StackActions } from 'react-navigation'
import Icon from 'react-native-vector-icons/Ionicons';
import { WebBrowser } from 'expo'

import Styles from 'app/constants/Styles'
import Vars from 'app/constants/Vars'


export default class Menu extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        id: this.props.navigation.getParam('id', null),
    };

}

onItemPress = (item) => {

    let next;
    let route = item.page_type.slice(4);


    if(route == "PageExternal") {
        WebBrowser.openBrowserAsync(item.page.url);

    } else {

        if(item.children.length > 0) {

            next = StackActions.push({
                routeName: 'Menu',
                params: {
                    menu: item.children,
                    title: item.title
                },
            });
        } else {
            next = StackActions.push({
                routeName: route,
                params: {
                    page: item.page,
                    title: item.title
                },
            });



        }

        this.props.navigation.dispatch(next);
    }

}


renderListItem = ({ item }) => {

    console.log('renderListItem', item.title);
    if(item.page_type == 'App\\PageExternal') {
        rightIcon = <View style={Styles.rightIconContainer}><Icon name='md-open' size={13} /></View>;
    } else {
        rightIcon = <View style={Styles.rightIconContainer}><Icon name='ios-arrow-forward' size={13} /></View>;
    }


    return(
        <ListItem
            title = {item.title}
            id = {item.id}
            rightIcon = {rightIcon}
            onPress = {() => { this.onItemPress(item)}}
            containerStyle = { Styles.listItem }
            titleStyle = { Styles.listitemTitle }
        ></ListItem>
    )
}

render() {
return (
    <ScrollView containerStyle={Styles.container}>

        {this.props.title &&
            <Text style={[Styles.h1, Styles.noSpace, Styles.horizontalSpace, Styles.whiteText]}>{this.props.title}</Text>
        }

        {this.props.loading &&
            <ActivityIndicator color='#FFFFFF' />
        }

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

);
}
}

Styles.js

import { StyleSheet } from "react-native";
import Vars from 'app/constants/Vars';

export default StyleSheet.create({
container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
},

....

listItem: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'space-between',
    backgroundColor: Vars.colors.white,
    marginBottom: Vars.spacing.normal,
    borderTopWidth: 0,
    borderBottomWidth: 0,
    borderRadius: Vars.radius,
},

listitemTitle: {
    fontSize: 20,
    fontFamily: 'scala-sans-bold',
    color: Vars.colors.black,
    paddingVertical: 15,
    margin: 0,
},

....

});