Как создать редактируемую таблицу в react native?

@elda 

React Native не имеет встроенных компонентов для создания редактируемых таблиц, но есть множество внешних библиотек, которые можно использовать для этой цели. Одна из популярных библиотек - react-native-table-component.

Для установки библиотеки выполните следующую команду:

1

npm install react-native-table-component

После установки вы можете использовать компоненты библиотеки в своем приложении React Native.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

import { Table, Row, Rows } from 'react-native-table-component';

// ...

render() {
  const tableData = [
    ['1', '2', '3'],
    ['a', 'b', 'c'],
    ['one', 'two', 'three'],
  ];

  return (
    <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
      <Row data={['Column 1', 'Column 2', 'Column 3']} style={styles.head} textStyle={styles.text}/>
      <Rows data={tableData} textStyle={styles.text}/>
    </Table>
  );
}

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

@elda 

Вот пример создания редактируемой таблицы в React Native с использованием библиотеки react-native-table-component и react-native-modal:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

import React, { useState } from 'react'; import { View, Text, TextInput, TouchableOpacity } from 'react-native'; import { Table, Row, Rows } from 'react-native-table-component'; import Modal from 'react-native-modal';

const EditableTable = () => { const [tableData, setTableData] = useState([ ['1', '2', '3'], ['a', 'b', 'c'], ['one', 'two', 'three'], ]); const [isModalVisible, setModalVisible] = useState(false); const [editingRowIndex, setEditingRowIndex] = useState(null); const [editingColumnIndex, setEditingColumnIndex] = useState(null); const [editedValue, setEditedValue] = useState('');

const toggleModal = (rowIndex, columnIndex) => { setModalVisible(!isModalVisible); setEditingRowIndex(rowIndex); setEditingColumnIndex(columnIndex); };

const saveChanges = () => { const newData = [...tableData]; newData[editingRowIndex][editingColumnIndex] = editedValue; setTableData(newData); setModalVisible(false); setEditedValue(''); };

return ( <Table borderStyle={{ borderWidth: 2, borderColor: '#c8e1ff' }}> <Row data={['Column 1', 'Column 2', 'Column 3']} style={{ backgroundColor: '#f1f8ff' }} textStyle={{ fontWeight: 'bold', textAlign: 'center' }} /> <Rows data={tableData} textStyle={{ textAlign: 'center' }} onPress={(rowIndex, columnIndex) => toggleModal(rowIndex, columnIndex) } />

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

  <Modal isVisible={isModalVisible}>
    <View style={{ backgroundColor: 'white', padding: 16 }}>
      <Text>Editing Row {editingRowIndex}, Column {editingColumnIndex}</Text>
      <TextInput
        value={editedValue}
        onChangeText={setEditedValue}
        style={{ borderWidth: 1, borderColor: 'gray', marginBottom: 8 }}
      />
      <TouchableOpacity onPress={saveChanges}>
        <Text>Save</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => setModalVisible(false)}>
        <Text>Cancel</Text>
      </TouchableOpacity>
    </View>
  </Modal>
</View>

); };

export default EditableTable;

В этом примере мы создаем редактируемую таблицу с тремя столбцами и тремя строками. Если пользователь нажимает на ячейку таблицы, открывается модальное окно, в котором он может изменить значение ячейки. При нажатии на кнопку "Сохранить" изменения сохраняются, а модальное окно закрывается. Кнопка "Отмена" просто закрывает модальное окно без сохранения изменений.

Приложение должно импортировать библиотеки react-native-table-component и react-native-modal. Затем создается функциональный компонент EditableTable, который содержит состояния для данных таблицы, видимости модального окна и редактируемой ячейки. Когда пользователь нажимает на ячейку таблицы, функция toggleModal вызывается для отображения/скрытия модального окна. При сохранении изменений функция saveChanges обновляет данные таблицы с новым значением и закрывает модальное окно.

Компоненты Table, Row, Rows используются для создания таблицы, а компонент Modal для создания модального окна. Вы также можете настроить стили и другие свойства компонентов по своему усмотрению.