Динамическая печать React Native Table или повторяющийся элемент печати в реакции native

Question

• Привет. Разработчик я делаю такое условие, я хочу head1 с tableData value1, но я сделал где-то ошибку, поэтому вывод не пришел, пожалуйста, помогите мне где я ошибся

mycode:

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
import { Table, Row, Rows} from 'react-native-table-component';
export  default class TableReactNative extends Component {
    state={
        tableHead : ['Head1', 'Head2', 'Head3', 'Head4','Head5','Head6','Head7', 'Head8'],
        tableData :[[
            '1', '2', '3', '4','1', '2', '3', '4'],[
            '1', '2', '3', '4','1', '2', '3', '4']],
        rowData:[],
    }
    componentDidMount(){
       this.setTable();
    }
    setTable(){
        var table=[];
        for(let i=0;i<this.state.tableData.length;i++){

               var tabHead=this.state.tableHead[i];
               var tabData=this.state.tableData[i];

           var val= <View><Table><Row data={tabHead} /><Rows data={tabData} /></Table></View>;

           table.push(val);
        }

        this.setState({rowData:table})
    }
    render() {
        return (
            <View>
                {this.state.rowData}
            </View>
        )
    }
}

ожидаемое о / п:

 Head1  Head2   Head3  ...                                           
    1       2       3     ...
 Head1  Head2   Head3  ...                                           
    1       2       3     ...
 Head1  Head2   Head3  ...                                           
    1       2       3     ...

1. это означает, что заголовки одинаковые, но данные столбца изменяются здесь. так что я хочу сделать один заголовок с одним столбцом, потому что в моем реальном мобильное приложение огромное количество данных, которые я хочу сделать динамическую таблицу для все данные с одинаковым заголовком.

Answer 1

Вы можете попробовать этот код.

import React, { Component } from 'react';
import {
  Dimensions,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { Table,  Row,  Rows} from 'react-native-table-component';
const {width, height} = Dimensions.get('window');

export  default class TableReactNative extends Component {

  constructor(props) { 
    super(props); 
    this.state = { 
    tableHead: ['Head1', 'Head2', 'Head3'],
     tableData: [
      ['1', '2', '3'],
      ['4', '5', '6'],
      ['7', '8', '9']
    ]
  }
}

renderTable(){
 return this.state.tableData.map((tableDataRow)=>{
   return(
     <View key={tableDataRow[0]}>
       <Table>
         <Row data={this.state.tableHead}/>
         <Row data={tableDataRow}/>
       </Table>
     </View>
   )
 })
}

render() {
  return (
    <View style={{width: width, height:height }}>
      {this.renderTable()}
    </View>
  )
 }
}