javascript - 我如何在 react native/expo 中制作相同的表格模型（没有文字内容）作为我的图片示例

Question

我如何在 react-native/expo 中制作相同的表格模型（我需要没有内容的相同表格）作为我的图片示例？我尝试了很多东西，但它对我不起作用，我需要一些帮助。在这里你可以看到我的示例第一张图片，我想将它作为第二张图片转移到示例中。

这是我现在拥有的示例表：

这是我想要的示例表：

这是我的代码：

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    ActivityIndicator,
    Platform,
    FlatList,
    TouchableOpacity,
    Dimensions
} from "react-native";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import HeaderButton from "../components/HeaderButton";
import axios from "axios";
import { Card } from "react-native-elements";
import { Icon } from "react-native-elements";



const { width, height } = Dimensions.get('window');
export default class MainScreen extends Component {
    constructor(props) {
        super(props);
        this.state = { data: [] };
    }

    getData = () => {
        this.setState({ isLoading: true, data: [] })
        axios.get("https://rallycoding.herokuapp.com/api/music_albums ")
            .then(res => {
                this.setState({
                    isLoading: false,
                    data: res.data
                });
                console.log(res.data);
            });
    }

    componentDidMount() {
        this.props.navigation.setParams({ getData: this.getData });
        this.getData()
    }

    renderItem(item) {
        const { title, artist} = item.item;
        return (
            <TouchableOpacity
                onPress={() => this.props.navigation.navigate("Settings")}
            >
                 <View style={styles.itemView}>
                <View style={styles.itemInfo}>
                    <Text style={styles.name}>
                        {title+ ' ' + artist}
                    </Text>
                    <Text style={styles.vertical} numberOfLines={1}>{artist} |</Text>
                </View>
            </View>
            </TouchableOpacity>
        );
    }

    render() {
        if (this.state.isLoading) {
            return (
                <View style={{ flex:0,paddingTop: 300 }}>
                    <Text style={{ alignSelf: "center", fontWeight: "bold", fontSize: 20 }}>loading data...</Text>
                    <ActivityIndicator size={'large'} color={'#08cbfc'} />
                </View>
            );
        }
        return (
            <>
                <View style={styles.container}>
                    <FlatList
                        data={this.state.data}
                        renderItem={this.renderItem.bind(this)}
                        keyExtractor={(_, index) => String(index)}
                    />
                    {/* <Text>{this.state.data.length !== 0 ? this.state.data.length : "NO DATA FOUND" }</Text> */}
                </View>

                <View style={styles.bottomMainContainer}>
                    <View style={styles.bottomView} >
                        <Text style={styles.bottomTextStyle}>סה"כ: {this.state.data.length} רשומות</Text>
                    </View>
                </View>
            </>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 0,
        justifyContent: 'center',
        alignItems: 'center',
        // backgroundColor:'pink'


    },
    itemView: {
        flex: 1,
        width,
        borderBottomWidth: 0.5,
        borderColor: 'black',
        borderStyle: 'solid',
        paddingHorizontal: 12,
        flexDirection: 'row',
    },
    imgContainer: {
        // flex: 0,
        // borderColor: 'black',
        // borderWidth: 1.5,
        // height: 60,
        // width: 60,
        // alignItems: 'center',
        // justifyContent: 'center',
    },
    itemInfo: {
        flex: 1,
        marginHorizontal: 10,
        // backgroundColor:'pink'
    },
    name: {
        //fontFamily: 'Verdana',
        fontSize: 18,
        color: '#ff0000',
        textAlign: 'left',
    },
    vertical: {
        fontSize: 18,
    }

标签： javascriptreactjsreact-nativeexpo