React Native Table 在 react native 中动态打印或重复元素打印

Question

• 你好。开发人员我正在做这样的条件，我想要 head1 和 tableData value1 但我在某个地方犯了错误所以输出不来请帮助我 我在哪里做错了

我的代码：

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>
        )
    }
}

预期 o/p：

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

1. 表示标题相同，但此处的列数据更改 tabledata 两个数组 所以我想用一栏做一个标题，因为在我的真实 移动应用程序大量数据我想为其制作动态表 每个数据都有相同的标题。

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>
  )
 }
}