Блог

Главная - Вопросы по программированию - Как я могу отображать данные в табличном формате в react native?

Как я могу отображать данные в табличном формате в react native?

#javascript #react-native

#javascript #react-native

Вопрос:

Мне нужно отображать данные в табличном формате в моем приложении. Я хочу что-то вроде этого»

Как я могу добавить значок выпадающего списка рядом с первым заголовком в таблице и оформить свой код аналогично приведенному выше изображению?

Ответ №1:

Вы можете использовать DataTable из библиотеки react-native-paper.

 import { DataTable } from 'react-native-paper';

const MyComponent = () => (
  <DataTable>
    <DataTable.Header>
      <DataTable.Title
        sortDirection='descending'>Dessert</DataTable.Title>
      <DataTable.Title numeric>Calories</DataTable.Title>
      <DataTable.Title numeric>Fat (g)</DataTable.Title>
    </DataTable.Header>
    </DataTable> );

SortDirection=’по убыванию’ поможет вам добавить значок выпадающего списка рядом с вашим заголовком.

Комментарии:

1. можете ли вы изменить цвет стрелки?

2. Я не изучал эту часть. Поэтому я не уверен, сможем ли мы изменить цвет. Я работал над react native в течение очень короткого периода времени и всего для 1 проекта. Так что, я думаю, вам придется изучить это самостоятельно.

Ответ №2:

попробуйте этот пакет https://www.npmjs.com/package/react-native-table-component

 import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';

export default class ExampleOne extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['Visite Date', 'Member', 'you ...', 'etc..'],
      tableData: [
        ['07/29/2016', 'JEFF', '$46.80', '...'],
        ['07/29/2016', 'JEFF', '$46.80', '...'],
        ['07/29/2016', 'JEFF', '$46.80', '...'],
        ['07/29/2016', 'JEFF', '$46.80', '...']
      ]
    }
  }

  render() {
    const state = this.state;
    return (
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
          <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
          <Rows data={state.tableData} textStyle={styles.text}/>
        </Table>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#f1f8ff' },
  text: { margin: 6 }
});

Комментарии:

1. Спасибо @ Selmi за ваше решение, но я хотел бы знать, как я могу добавить значок выпадающего списка рядом с заголовком 1 в таблице

2. @Selmi Karim как установить пользовательский размер шрифта для текста, отображаемого в таблице?