反应本机表组件中的行和列显示问题

Question

我有一个我使用react native table component的React Native应用。此处显示的是来自api的数据。一切正常，但特殊的数据显示在这样的列中：

但是我想这样给他们看：

行和列中可能有引起问题的内容。这是我现在拥有的代码：

import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';

export class MPT extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead1: ['1ST Prize'],
      tableData1: [
        ['----']
      ],
      tableHead2: ['2ND Prize'],
      tableData2: [
        ['----']
      ],
      tableHead3: ['3RD Prize'],
      tableData3: [
        ['----']
      ],
      tableHead4: ['Special'],
      tableData4: [],
      tableHead5: ['Consolation'],
      tableData5: [
        ['----']
      ]
    }
  }

 
  render() {
    const state = this.state;
    return (
      <Container>
        <Content>
          <View style={{ paddingTop: 10, paddingHorizontal: 10, flexDirection: 'row', justifyContent: 'space-evenly' }}>

            <View>
              <Card style={{ backgroundColor: '#000', height: 200, width: 110, paddingTop: 10, alignItems: 'center' }}>
                <View >
                  <Image source={require('../assets/logo1.jpg')} style={styles.imageStyle}
                  /></View>
                <View>
                  <Text style={styles.textStyle}>Magnum</Text>
                </View>
                <View style={{ flexDirection: 'row' }}>
                  <Icon name='calendar' style={{ color: '#fff', marginRight: 5, paddingTop: 10, fontSize: 18 }} /><Text style={styles.textStyle}>24/05/2019</Text>
                </View>
                <View style={{ flexDirection: 'row' }}>
                  <Icon name='megaphone' style={{ color: '#fff', fontSize: 22, marginTop: 15 }} /><Icon name='refresh' style={{ color: '#fff', fontSize: 22, marginLeft: 15, marginTop: 15 }} />
                </View>
              </Card>
              <Table borderStyle={{ borderWidth: 4, borderColor: '#c5cbd6' }}>
                <Row data={this.state.tableHead1} style={{ height: 30, backgroundColor: '#000' }} textStyle={{color:'#fff',margin:6,alignSelf:'center'}} />
                <Rows data={this.state.tableData1} textStyle={styles.text} />
              </Table>
              <Table borderStyle={{ borderWidth: 4, borderColor: '#c5cbd6' }}>
                <Row data={this.state.tableHead2} style={{ height: 30, backgroundColor: '#000' }} textStyle={{color:'#fff',margin:6,alignSelf:'center'}} />
                <Rows data={this.state.tableData2} textStyle={styles.text} />
              </Table>
              <Table borderStyle={{ borderWidth: 4, borderColor: '#c5cbd6' }}>
                <Row data={this.state.tableHead3} style={{ height: 30, backgroundColor: '#000' }} textStyle={{color:'#fff',margin:6,alignSelf:'center'}} />
                <Rows data={this.state.tableData3} textStyle={styles.text} />
              </Table>
              <Table borderStyle={{ borderWidth: 4, borderColor: '#c5cbd6' }}>
                <Row data={this.state.tableHead4} style={{ height: 30, backgroundColor: '#000' }} textStyle={{color:'#fff',margin:6,alignSelf:'center'}} />
                <Rows data={this.state.tableData4} textStyle={styles.text} />
              </Table>
              <Table borderStyle={{ borderWidth: 4, borderColor: '#c5cbd6' }}>
                <Row data={this.state.tableHead5} style={{ height: 30, backgroundColor: '#000' }} textStyle={{color:'#fff',margin:6,alignSelf:'center'}} />
                <Rows data={this.state.tableData5} textStyle={styles.text} />
              </Table>
            </View>
          </View>
          <View style={{paddingVertical:10}}>
        <Button style={{height:50,width:'100%',backgroundColor:'#a80505',alignItems:'center',justifyContent:'center'}}><Text style={{fontSize:18,color:'#fff'}}>Share</Text></Button>
        </View>

        </Content>
      </Container>
    )
  }
}

export default MPT

要获得预期的输出，需要进行哪些更改？