Question

我的结果包含JSON 。我使用道具的概念从另一个页面获取结果。结果中包含以下数据。

 [
    {
        "created_ts": "2020-03-30T23:51:56.280531",
        "description": "Timestamp\n\"2020-03-27T10:33:20.798318638+00:00\"\nError Log\n\"DatabaseError: Unknown error\\n\"\nLink\nhttps://eslogs.prod.dna.rr-it.com/_plugin/kibana/app/kibana#/discover?_g=%28refreshInterval:%28pause:!t,value:0%29,time:%28from:now-15d,to:now%29%29&_a=%28columns:!%28message,kubernetes.labels.job-name%29,index:d3b516c0-eb8c-11e9-8e90-f70ee6010b8a,interval:auto,query:%28language:lucene,query:%27kubernetes.container_name.keyword:shopstyle-dw-visit-shopping-order-load%20AND%20message:error%2A%27%29,sort:!%28%27@timestamp%27,desc%29%29\n",
        "id": 1,
        "incident_ticket_id": "131570",
        "job_last_commit_person": "naga.gswa",
        "job_name": "shopstyle_dw_visit_shopping_order_load",
        "job_owner": "vkramashae",
        "job_type": "spark",
        "last_modified_ts": "2020-03-30T23:51:56.280538",
        "on_call_person": "=rahulu.rk@face.com",
        "severity": "P3",
        "status": "To Do",
        "team_id": 2,
        "tracking_ticket_id": "DE-445474"
    }
]

无法以表格格式显示Api数据。我尝试了以下方法，但它不起作用，我想动态地工作，有人可以告诉解决方案如何解决此问题。

import React from 'react';
    import {
      View,
      Text,
      StyleSheet,
      FlatList,
      TouchableOpacity,
      ScrollView
    } from 'react-native';
    import { Table, TableWrapper, Row, Rows, Col,Cell } from 'react-native-table-component';


    const ResultsList = ({title , results}) => {

      const head = ['','incident_ticket_id','job_last_commit_person','job_name']

      return (
        <ScrollView style={{marginTop:10}} >
                <ScrollView horizontal={true}>
                    <View style={styles.containerT}>
                        <FlatList
                        datavalue={results}
                        style={{flex:1,marginVertical:20}}
                        renderItem={({item}) =>
                        {

                          return<View style={styles.container}>
                              <Table borderStyle={{borderWidth: 1}}>
                                <Row data={head} flexArr={[1, 2, 1, 1]} style={<styles.head/>} textStyle={styles.text}/>

                                  <Row flexArr={[2, 1, 1]} style={styles.row} textStyle={styles.text}>
                                    <Cell>{item.id}</Cell>
                                    <Cell>{item.incident_ticket_id}</Cell>
                                    <Cell>{item.job_last_commit_person}</Cell>
                                    <Cell>{item.job_last_commit_person}</Cell>
                                  </Row>
                              </Table>
                            </View>
                        }}
                        numColumns={1}
                        />

                    </View>
                </ScrollView>
            </ScrollView>
      );
    };

    const styles = StyleSheet.create({
      title: {
        fontSize: 18,
        fontWeight: 'bold',
        marginLeft: 15,
        marginBottom: 5
      },
      container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
      head: {  height: 40,  backgroundColor: '#f1f8ff'  },
      wrapper: { flexDirection: 'row' },
      title: { flex: 1, backgroundColor: '#f6f8fa' },
      row: {  height: 28  },
      text: { textAlign: 'center' }
    });

Answer 1

所有您正在做的事情都是对的，唯一的事情是在FlatList中，您正在传递一个prop作为datavalue，它应该是data。

更改

                    <FlatList
                    datavalue={results}

到

                     <FlatList
                    data={results}

在FlatList内部传递整个表的另一件事，您应该只传递行，为每行指定特定宽度。

如果您不需要使用FlatList，可以这样做

    const ResultsList = ({title , results}) => {

    const head = ['','incident_ticket_id','job_last_commit_person','job_name']
    //Here iam using tabledata to store rows
    const tableData=[];
        for(var i=0;i<results.length;i++){
            tableData[i]=[results[i].id,results[i].incident_ticket_id,results[i].job_last_commit_person,results[i].job_last_commit_person];

        }
//Using widthArr as the coloumn and row should occupy same width
   const  widthArr= [40, 60, 80, 100]
     return (
            <ScrollView style={{marginTop:10}} >
                    <ScrollView horizontal={true}>
                        <View style={styles.containerT}>
                        <View style={styles.container}>
                                  <Table borderStyle={{borderWidth: 1}}>
                                    <Row data={head} widthArr={widthArr} flexArr={[1, 2, 1, 1]} style={<styles.head/>} textStyle={styles.text}/>
                                    <Rows flexArr={[1, 2, 1, 1]} widthArr={widthArr} data={tableData} textStyle={styles.text}/>
                                  </Table>
                                </View>
                        </View>
                    </ScrollView>
                </ScrollView>
          );
        };

我只是通过将第二个对象中的id更改为2来两次传递同一对象。

希望这会有所帮助！

React Native无法显示/显示平面列表中的表格

1 个答案: