多表 React Native

Question

我正在尝试显示多个 table，每个都有单独的数据。无论我尝试什么，我都只能显示 3 个 table，但所有数据都相同。有人可以举例说明如何这样做吗？

我已将代码恢复为仅显示原始数据集，但显示了 3 tables。

如果有人能告诉我如何为第 2 和第 3 添加数据，那将是一个巨大的帮助 table。

谢谢

import React, { Component } from "react";
import { StyleSheet, View, Text, TouchableOpacity, Alert } from "react-native";
import { Table, TableWrapper, Row, Cell } from "react-native-table-component";
import styled from "styled-components";

export default class ExampleFour extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ["Name", "Amount(£)", "Ref", "Payment"],
      tableData: [
        ["T. Walker", "870", "3", "d"],
        ["S. Weintraub", "650", "c", "d"],
        ["M. Clingan", "320", "3", "4"],
        ["S. Lucy", "1010", "c", "d"]
      ]
    };
  }

  static navigationOptions = {
    header: null
  };
  _alertIndex(index) {
    Alert.alert(`Payment Sent`);
  }

  render() {
    const state = this.state;
    const element = (data, index) => (
      <TouchableOpacity onPress={() => this._alertIndex(index)}>
        <View style={styles.btn}>
          <Text style={styles.btnText}>button</Text>
        </View>
      </TouchableOpacity>
    );

    return (
      <View style={styles.container}>
        <Title>Payments - Outgoing </Title>
        <Table borderStyle={{ borderWidth: 1 }}>
          <Row
            data={state.tableHead}
            style={styles.head}
            textStyle={styles.text}
          />
          {state.tableData.map((rowData, index) => (
            <TableWrapper key={index} style={styles.row}>
              {rowData.map((cellData, cellIndex) => (
                <Cell
                  key={cellIndex}
                  data={cellIndex === 3 ? element(cellData, index) : cellData}
                  textStyle={styles.text}
                />
              ))}
            </TableWrapper>
          ))}
        </Table>
        <Title>Payments - Due </Title>
        <Table borderStyle={{ borderWidth: 1 }}>
          <Row
            data={state.tableHead}
            style={styles.head}
            textStyle={styles.text}
          />
          {state.tableData.map((rowData, index) => (
            <TableWrapper key={index} style={styles.row}>
              {rowData.map((cellData, cellIndex) => (
                <Cell
                  key={cellIndex}
                  data={cellIndex === 3 ? element(cellData, index) : cellData}
                  textStyle={styles.text}
                />
              ))}
            </TableWrapper>
          ))}
        </Table>
        <Title>Payments - Overdue </Title>
        <Table borderStyle={{ borderWidth: 1 }}>
          <Row
            data={state.tableHead}
            style={styles.head}
            textStyle={styles.text}
          />
          {state.tableData.map((rowData, index) => (
            <TableWrapper key={index} style={styles.row}>
              {rowData.map((cellData, cellIndex) => (
                <Cell
                  key={cellIndex}
                  data={cellIndex === 3 ? element(cellData, index) : cellData}
                  textStyle={styles.text}
                />
              ))}
            </TableWrapper>
          ))}
        </Table>
      </View>
    );
  }
}
const Title = styled.Text`
  font-size= 16px;
  color: #b8bece;
  font-weight: 500;
  `;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    paddingTop: 30,
    backgroundColor: "#f0f3f5"
  },
  head: { height: 40, backgroundColor: "#808B97" },
  text: { margin: 6 },
  row: { flexDirection: "row", backgroundColor: "white" },
  btn: {
    width: 58,
    height: 18,
    backgroundColor: "black",
    borderRadius: 2,
    alignSelf: "center"
  },
  btnText: { textAlign: "center", color: "#fff" }
});

Answer 1

您在所有三个表中使用相同的数据呈现，在这种情况下，数据将反映相同。

但是，如果您在下面使用不同的值 tableData1、tableData2、tableData3，它将开始反映唯一数据。

import React, { Component } from "react";
import { StyleSheet, View, Text, TouchableOpacity, Alert } from "react-native";
import { Table, TableWrapper, Row, Cell } from "react-native-table-component";
import styled from "styled-components";

export default class ExampleFour extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ["Name", "Amount(£)", "Ref", "Payment"],
      tableData1: [
        ["T. Walker", "870", "3", "d"],
        ["S. Weintraub", "650", "c", "d"],
        ["M. Clingan", "320", "3", "4"],
        ["S. Lucy", "1010", "c", "d"]
      ],
      tableData2: [
        ["T. New", "870", "3", "d"],
        ["S. New", "650", "c", "d"],
        ["M. new", "320", "3", "4"],
        ["S. new", "1010", "c", "d"]
      ],
      tableData3: [
        ["T. New 2", "870", "3", "d"],
        ["S. New 2", "650", "c", "d"],
        ["M. new 2", "320", "3", "4"],
        ["S. new 2", "1010", "c", "d"]
      ],
    };
  }

  static navigationOptions = {
    header: null
  };
  _alertIndex(index) {
    Alert.alert(`Payment Sent`);
  }

  render() {
    const state = this.state;
    const element = (data, index) => (
      <TouchableOpacity onPress={() => this._alertIndex(index)}>
        <View style={styles.btn}>
          <Text style={styles.btnText}>button</Text>
        </View>
      </TouchableOpacity>
    );

    return (
      <View style={styles.container}>
        <Title>Payments - Outgoing </Title>
        <Table borderStyle={{ borderWidth: 1 }}>
          <Row
            data={state.tableHead}
            style={styles.head}
            textStyle={styles.text}
          />
          {state.tableData1.map((rowData, index) => (
            <TableWrapper key={index} style={styles.row}>
              {rowData.map((cellData, cellIndex) => (
                <Cell
                  key={cellIndex}
                  data={cellIndex === 3 ? element(cellData, index) : cellData}
                  textStyle={styles.text}
                />
              ))}
            </TableWrapper>
          ))}
        </Table>
        <Title>Payments - Due </Title>
        <Table borderStyle={{ borderWidth: 1 }}>
          <Row
            data={state.tableHead}
            style={styles.head}
            textStyle={styles.text}
          />
          {state.tableData2.map((rowData, index) => (
            <TableWrapper key={index} style={styles.row}>
              {rowData.map((cellData, cellIndex) => (
                <Cell
                  key={cellIndex}
                  data={cellIndex === 3 ? element(cellData, index) : cellData}
                  textStyle={styles.text}
                />
              ))}
            </TableWrapper>
          ))}
        </Table>
        <Title>Payments - Overdue </Title>
        <Table borderStyle={{ borderWidth: 1 }}>
          <Row
            data={state.tableHead}
            style={styles.head}
            textStyle={styles.text}
          />
          {state.tableData3.map((rowData, index) => (
            <TableWrapper key={index} style={styles.row}>
              {rowData.map((cellData, cellIndex) => (
                <Cell
                  key={cellIndex}
                  data={cellIndex === 3 ? element(cellData, index) : cellData}
                  textStyle={styles.text}
                />
              ))}
            </TableWrapper>
          ))}
        </Table>
      </View>
    );
  }
}
const Title = styled.Text`
  font-size= 16px;
  color: #b8bece;
  font-weight: 500;
  `;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    paddingTop: 30,
    backgroundColor: "#f0f3f5"
  },
  head: { height: 40, backgroundColor: "#808B97" },
  text: { margin: 6 },
  row: { flexDirection: "row", backgroundColor: "white" },
  btn: {
    width: 58,
    height: 18,
    backgroundColor: "black",
    borderRadius: 2,
    alignSelf: "center"
  },
  btnText: { textAlign: "center", color: "#fff" }
});

多表 React Native

Multiple Tables React Native

reactjs

react-native

react-native-android