react-native - 在 React Native 中以表格格式显示对象数组的值

Question

我是 React Native 新手。我的目标是在 React Native 中以表格格式显示下面的对象数组。我正在使用React-Native-Paper的DataTable。

var accounts=[
        {
            "accNumber": "56456454",
            "accType": "D",
            "productCode": "1454541",
            "availBalance": "987436.46",
          },
        {
            "accNumber": "12424345645",
            "accType": "D",
            "productCode": "154545641",
            "availBalance": "500397.64",
          },
        {
            "accNumber": "4554545664",
            "accType": "D",
            "productCode": "44545",
            "availBalance": "2467.02",
          }
    ]

我已经尝试过，但仍然显示错误:

 <DataTable>
   <DataTable.Header>
      <DataTable.Title >
          <Text style={styles.text}>Account</Text>
      </DataTable.Title>
      <DataTable.Title >
          <Text style={styles.text}>Code</Text>
      </DataTable.Title>
      <DataTable.Title >
           <Text style={styles.text}>Available Balance</Text> 
      </DataTable.Title>
   </DataTable.Header>
  {
   accounts.map(account=>{
     return(
        <DataTable.Row>
           <DataTable.Cell>{account.accNumber}</DataTable.Cell>
           <DataTable.Cell>{account.productCode}</DataTable.Cell>
           <DataTable.Cell>{account.availBalance}</DataTable.Cell>
        </DataTable.Row>
      )
   })}
 </DataTable>

请建议如何以React Native支持的表格格式显示帐户数据。除了DataTable之外，还有其他方法可以将数据映射为表格格式吗？

Expected Result:

Account                Code         Available Balance
56456454               1454541      987436.46
12424345645            154545641    500397.64
4554545664             44545        2467.02

Answer 1

如果不看到错误消息，很难确切地知道错误，但我能够调整您的代码以使react-native-paper DataTable正常工作。

下面是一个工作示例。您也可以自己运行 in this snack 。

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { DataTable } from 'react-native-paper';

export default App = () => {
  var accounts = [
    {
      accNumber: '56456454',
      accType: 'D',
      productCode: '1454541',
      availBalance: '987436.46',
    },
    {
      accNumber: '12424345645',
      accType: 'D',
      productCode: '154545641',
      availBalance: '500397.64',
    },
    {
      accNumber: '4554545664',
      accType: 'D',
      productCode: '44545',
      availBalance: '2467.02',
    },
  ];

  return (
    <View style={styles.container}>
      <DataTable>
        <DataTable.Header>
          <DataTable.Title>Account</DataTable.Title>
          <DataTable.Title>Code</DataTable.Title>
          <DataTable.Title>
            Balance Available
          </DataTable.Title>
        </DataTable.Header>
        {
          accounts.map(account => {
          return (
            <DataTable.Row
              key={account.accNumber} // you need a unique key per item
              onPress={() => {
                // added to illustrate how you can make the row take the onPress event and do something
                console.log(`selected account ${account.accNumber}`)
              }}
            >
              <DataTable.Cell>
                {account.accNumber}
              </DataTable.Cell>
              <DataTable.Cell style={styles.messageColumn}>
                {account.productCode}
              </DataTable.Cell>
              <DataTable.Cell numeric>
                {account.availBalance}
              </DataTable.Cell>
            </DataTable.Row>
        )})}
      </DataTable>
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});