按钮 - React Native

Question

我正在显示 3 个表格，每个表格的最后一列都有一个按钮，但按钮设置使它们全部连接，我想要做的是在第一个表格和第二个表格上有按钮功能以具有不同的措辞并且警报有所不同，最后，我想从决赛桌中删除按钮，我该怎么做？ （下面的截图让我更清楚地理解我糟糕的解释）。

谢谢

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 = {
      tableHead1: ["Name", "Amount(£)", "Ref", "Payment"],
      tableData1: [
        ["T. Walker", "870", "009", "d"],
        ["S. Weintraub", "650", "041", "d"],
        ["M. Clingan", "320", "021", "4"],
        ["S. Lucy", "1010", "034", "d"]
      ],
      tableHead2: ["Name", "Amount(£)", "Ref", "Send Invoice"],
      tableData2: [
        ["T. New", "870", "3", "d"],
        ["S. New", "650", "c", "d"],
        ["M. new", "320", "3", "4"],
        ["S. new", "1010", "c", "d"]
      ],
      tableHead3: ["Name", "Amount(£)", "Ref", "Date Due"],
      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.tableHead1}
            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.tableHead2}
            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.tableHead3}
            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: 30,
    paddingTop: 30,
    backgroundColor: "#f0f3f5",
    justifyContent: "space-around"
  },
  head: { height: 40, backgroundColor: "white" },
  text: { margin: 6 },
  row: { flexDirection: "row", backgroundColor: "white" },
  btn: {
    width: 58,
    height: 22,
    backgroundColor: "#4775f2",
    alignSelf: "center",
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "black"
  },
  btnText: { alignSelf: "center", color: "black" }
});

Answer 1

我不能保证这会完美无缺，但如果出现问题，不应该有太多需要解决的问题。我只包括 ExampleFour 类，因为那是我改变的。

export default class ExampleFour extends Component {
  constructor(props) {
    super(props);
    this.titles = ["Payments - Outgoing", "Payments - Due", "Payments - Overdue"];
    this.state = {
      tableHead1: ["Name", "Amount(£)", "Ref", "Payment"],
      tableData1: [
        ["T. Walker", "870", "009", "T1B1"],
        ["S. Weintraub", "650", "041", "T1B2"],
        ["M. Clingan", "320", "021", "T1B3"],
        ["S. Lucy", "1010", "034", "T1B4"]
      ],
      tableHead2: ["Name", "Amount(£)", "Ref", "Send Invoice"],
      tableData2: [
        ["T. New", "870", "3", "T2B1"],
        ["S. New", "650", "c", "T2B2"],
        ["M. new", "320", "3", "T2B3"],
        ["S. new", "1010", "c", "T2B4"]
      ],
      tableHead3: ["Name", "Amount(£)", "Ref", "Date Due"],
      tableData3: [
        ["T. New 2", "870", "3", ""],
        ["S. New 2", "650", "c", ""],
        ["M. new 2", "320", "3", ""],
        ["S. new 2", "1010", "c", ""]
      ]
    };
  }

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

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

    return (
      <View style={styles.container}>
        {this.titles.map((title, tIndex) => {
          return (
            <React.Fragment>
              <Title>{title}</Title>
              <Table borderStyle={{ borderWidth: 1 }}>
                <Row
                  data={state[`tableHead${tIndex + 1}`]}
                  style={styles.head}
                  textStyle={styles.text}
                />
                {state[`tableData${tIndex + 1}`].map((rowData, rowIndex) => (
                  <TableWrapper key={rowIndex} style={styles.row}>
                    {rowData.map((cellData, cellIndex) => (
                      <Cell
                        key={cellIndex}
                        data={cellIndex === 3 ? element(cellData, index) : cellData}
                        textStyle={styles.text}
                      />
                    ))}
                  </TableWrapper>
                ))}
              </Table>
            </React.Fragment>
          );
        })}
      </View>
    );
  }
}