react-native - 反応ネイティブで、その中にeny値を表示していません

Question

アプリで車両のリストを表示するために、react-native-element を使用しました。これが私のコードです。

import React, { Component } from 'react'
import { Text, View, FlatList, StyleSheet, TextInput, KeyboardAvoidingView } from 'react-native'
import { Card, ListItem, Button, Icon } from 'react-native-elements'
import { fb, database } from '../../../config/config';

class Vehicles extends Component {
    constructor(props) {
        super(props);
        this.state = {
            v_number: "",
            v_brand: "",
            v_type: "",
            user: null,
            v_list: []
        };
    }

    componentDidMount() {
        this.getDataFromFBase();
    }

    getDataFromFBase() {
        fb.auth().onAuthStateChanged(function (user) {
            if (user) {
                this.setState({
                    user
                });
                database.collection('Users').doc(user.uid)
                    .collection('Vehicles').onSnapshot(snap => {
                        snap.docChanges().forEach(change => {
                            this.setState(prevState => ({
                                v_list: [...prevState.v_list, { key: change.doc.id, details: change.doc.data() }]
                            }))
                        });
                    });
            }
        }.bind(this));
    }

    render() {
        return (
            <KeyboardAvoidingView style={styles.vehicleContainer} behavior="padding">
                <Button
                    title=" Vehicle"
                    onPress={this.logOut.bind(this)}
                />
                <TextInput onChangeText={(vNum) => this.setState({ v_number: vNum })} placeholder="Vehicle Number" style={styles.ti1}></TextInput>
                <TextInput onChangeText={(vBrn) => this.setState({ v_brand: vBrn })} placeholder="Vehicle Brand" style={styles.ti1}></TextInput>
                <TextInput onChangeText={(vTyp) => this.setState({ v_type: vTyp })} placeholder="Vehicle Type" style={styles.ti1}></TextInput>
                <Button
                    title="Submit Vehicle"
                    onPress={this.submitVehicle.bind(this)}
                />
                {
                    this.state.v_list != null ? (
                        <Card containerStyle={{ padding: 0 }}>
                            {
                                this.state.v_list.map((veh, i) => {
                                    return (
                                        <ListItem
                                            key={i}
                                            roundAvatar
                                            title={veh.details.vehicle_number}
                                        />
                                    );
                                })
                            }
                        </Card>
                    ) : (
                            <Text>Empty</Text>
                        )
                }
            </KeyboardAvoidingView>
        )
    }
}


const styles = StyleSheet.create({
    vehicleContainer: {
        flex: 1, justifyContent: 'center', alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    ti1: {
        borderColor: 'gray', borderWidth: 1,
        width: 300,
        height: 40
    },
    cardV: { width: 100 }
});


export default Vehicles;

出力が正しくありません。しかし、私はエラーが発生していません。私が得るのは、空の垂直の白いカラーバーです。それにテキストはありません。私が使用すると、アイテムがはっきりと表示されます。ではありません。これが私の画面のスクリーンショットです。

誰でもこれで私を助けることができます。(すべての機能が実装されています。このコードにはこれらの機能を追加していません)