React Native Не в состоянии показать / отобразить таблицу внутри плоского списка - PullRequest
0 голосов
/ 11 апреля 2020

Мои результаты содержат 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' }
    });

1 Ответ

1 голос
/ 11 апреля 2020

Все, что вы делаете правильно, единственное, что есть в вашем FlatList, вы передаете реквизит как значение, которое должно быть данными.

изменить

                    <FlatList
                    datavalue={results}

на

                     <FlatList
                    data={results}

Еще одна вещь, которую вы передаете всей таблице в FlatList, вы должны только пропустить строки, указать определенную c ширину для каждой строки.

И в вашем случае вам не нужно используя 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>
          );
        };

enter image description here

Я пропускаю один и тот же объект два раза, просто изменив идентификатор второго объекта на 2.

Надеюсь, это поможет!

...