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

输出不正确。但我没有收到任何错误。我得到的是一个空的垂直白色条。并且上面没有任何文字。如果我使用 and ，项目会清楚地显示出来。但不在和。这是我的屏幕截图。

谁能帮我解决这个问题。（所有功能都实现了，我没有在这段代码中添加那些功能）

Answer 1

只要给你的卡片宽度，

<Card containerStyle={{ padding: 0,width:"100%'}}>

它没有显示任何内容，因为它没有足够的宽度来显示内容

<ListItem/> 在 react-native 中没有显示其中的 eny 值

<ListItem/> is not showing eny values inside it, in react-native

react-native

react-native-elements