表视图标题未使用reactn中的Listview与主体列对齐

Question

我实际上是在尝试使用本机设计一个普通的表，不幸的是我遇到了一些问题，我将在下面列出

标题列和正文列没有平等对齐。如果你能看到屏幕截图，你可以很好地看到（第一行）

如果列的文本值较小，则只会减小整行的宽度（参见第二行）

有什么方法可以解决这些问题

这是我试过的代码

import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView, ScrollView } from 'react-native';

export default class GridView extends Component {
isHeader = true;
onButtonClicked = () => {
    this.props.onButtonPressed();
}

renderRows = (row) => {
          return (<View style={styles.row}>
            {
                Object.keys(row).map((key) => {
                    return (<View style={styles.cell} key={Math.random()}>
                        <Text>{row[key] ? row[key].toString() : ''}</Text>
                    </View>)
                })
            }
        </View>)
    }

renderHeaders() {
  let data = apidata.data[0];
        this.isHeader = false;
        return (<View style={styles.row}>
            {
                Object.keys(data).map((key) => {
                    return (<View style={styles.cell} key={Math.random()}>
                        <Text>{key ? key.toString() : ''}</Text>
                    </View>)
                })
            }
        </View>)

}



   render() {
        let data = apidata.data;
        const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        let gridData = ds.cloneWithRows(data);
        return (
            <ScrollView horizontal={true} style={{marginTop:50}}>
                <ListView dataSource={gridData} scrollEnabled={true}
                    renderRow={this.renderRows} renderHeader={this.renderHeaders}
                />
            </ScrollView>
        );
    }
}



const styles = StyleSheet.create({
    row: {
        flex: 1,
        flexDirection: 'row'
    },
    cell: {
        //width: 90,
        borderWidth: 1,
        borderColor: 'black',
        padding: 5
    }
});



const apidata = {
    "data": [
        {
            id: "1",
            name: "anu",
            addressline1: "anu",
            addressline2: "anu",
            placeid: "1",
            phone1: "pg",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },
        {
            id: "1",
            name: "Sachin Ramesh Tendulkar",
            addressline1: "University Campus",
            addressline2: "Mumbai,India",
            placeid: "1",
            phone1: "012425389",
            phone2: 235,
            isdeleted: 1
        },

]

}