在 React Native 中以 Table 格式显示对象数组的值

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

Answer 2

是的，还有其他方法可以使用 FlatList 等在 React Native 中映射数据。

替换这部分代码：

{
   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>
      )
   })}
 </DataTab

用这个：

   { accounts.map((account, key)=>(
        <DataTable.Row>
            <DataTable.Cell>{account.accNumber}</DataTable.Cell>
            <DataTable.Cell>{account.productCode}</DataTable.Cell>
            <DataTable.Cell>{account.availBalance}</DataTable.Cell>
        </DataTable.Row>
        )
    )}

您应该摆脱警告。

Answer 3

我还在做一个需要从 JSON 生成表格视图的项目。我正在使用 React-Native 的 FlatList。这是我的代码示例

  <View style={{flex: 1}}>
    <View style={[tableStyle.tableWrapper]}>
      <ScrollView horizontal={true} showsHorizontalScrollIndicator={true}>
        <FlatList
          data={[renderList]}
          renderItem={this.renderTableBody}
          keyExtractor={(item, index) => index.toString()}
        />
      </ScrollView>
    </View>
  </View> 

您需要传递 renderList（从您的 JSON 文件生成的数组）并在 renderItem 中渲染这些值。