Вывести значения массива объектов в формате таблицы в ReactNative

Question

Я новичок в React Native. Моя цель - отобразить этот массив объектов в табличном формате в React Native. Я использую DataTable из React-Native-Paper.

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

Трудно точно понять, что это не так, не увидев сообщения об ошибке, но я смог адаптировать ваш код, чтобы заставить работать DataTable с оригинальной бумагой для работы.

Ниже приведен рабочий пример. Вы также можете запустить его самостоятельно в этой закуске.

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

Да, есть и другие способы сопоставления данных в react native с помощью FlatList и т. Д.

Замените этот раздел своего кода:

{
   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. Я использую FlatList React-Native. Вот пример моего кода

  <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.