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;

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

有人可以帮助我吗？（所有功能都已实现。我没有在代码中添加这些功能）

Answer 1

只需给卡片加宽

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

由于宽度不足以显示内容，因此未显示任何内容

<listitem>在react-native中没有显示eny值

1 个答案: