Настройка макета таблицы в React Native

Я перехожу к проекту React в React Native и нуждаюсь в помощи при настройке сетки в React Native. Я хочу настроить 5-col на x-row (количество строк может меняться). Я играл с пакетом response-native-tableview-simple, но я не могу указать диапазон ячейки. Я также попробовал пакет response-native-flexbox-grid, который я могу настроить столбцы, но я все еще не могу установить ширину диапазона для определенной ячейки. Интересно, есть ли что-нибудь, что я могу использовать.

Для справки, я хотел бы, чтобы мой стол выглядел примерно так:

     |Col 1|Col 2|Col 3|Col 4|Col 5|
     |------------------------------
Row 1|     Text        | Yes |  No | 
     |------------------------------
Row 2|     Text        | Yes |  No | 
     |------------------------------
Row 3|     Text        |  Dropdown |

Ответы

Ответ 1

Вы можете сделать это без каких-либо пакетов. Если каждая строка точно такая же, как и следующая, следует решить вашу проблему;

export default class Table extends Component {
    renderRow() {
        return (
            <View style={{ flex: 1, alignSelf: 'stretch', flexDirection: 'row' }}>
                <View style={{ flex: 1, alignSelf: 'stretch' }} /> { /* Edit these as they are your cells. You may even take parameters to display different data / react elements etc. */}
                <View style={{ flex: 1, alignSelf: 'stretch' }} />
                <View style={{ flex: 1, alignSelf: 'stretch' }} />
                <View style={{ flex: 1, alignSelf: 'stretch' }} />
                <View style={{ flex: 1, alignSelf: 'stretch' }} />
            </View>
        );
    }

    render() {
        const data = [1, 2, 3, 4, 5];
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            {
                data.map((datum) => { // This will render a row for each data element.
                    return this.renderRow();
                })
            }
            </View>
        );
    }
}

Ответ 2

Просмотрев здесь ответы, я обнаружил очень большую библиотеку, которая ведет себя так же, как таблицы Bootstrap. Я нашел макет с React Native очень сложным, но эта библиотека обеспечивает предсказуемые результаты макета.

Реагировать на родную легкую сетку

Я согласен с тем, что базовые таблицы flex должны быть встроены в React Native, но до тех пор, пока они не будут работать с этой библиотекой.

Ответ 3

Если вам нужен общий компонент Table, чтобы получить такой вывод:

enter image description here

import React from 'react';

import { Text, View } from 'react-native'

export default class Table extends React.Component {

    renderRow(row) {
        return (
            <View style={{ flex: 1, flexDirection: 'row', padding: 10 }}>
                {
                    row.map((column) => {
                        return (
                            this.renderColumn(column)
                        )
                    })
                }
            </View>
        );
    }

    renderColumn(column) {
        return (
            <View style={{
                flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'
            }}>
                {
                    column.map((item) => {
                        return (
                            <View style={{ flex: 1, flexDirection: "row" }}>
                                <Text style={{ flex: 1, alignSelf: 'center' }} size={16}>{item}</Text>
                            </View>
                        )
                    })
                }
            </View>
        )
    }

    render() {
        const data = this.props.dataSource;
        return (
            <View style={{
                alignSelf: 'stretch',
                flexDirection: 'column',
                alignItems: 'center',
            }}>
                {
                    data.map((row) => {
                        return this.renderRow(row);
                    })
                }
            </View>
        );
    }
}

В главном файле пользовательского интерфейса вы можете отобразить таблицу таким образом:

render() {
    const dataSource = [
        [["Row1 Column 1 Item0"], ["Row1 Column1 Item0 "]],
        [["Row2 Column 1 Item0"], ["Row2 Column2 Item0", "Row2 Column2 Item1"]],
    ]
    return (
        <UWTable dataSource={dataSource}/>
    )
}

Ответ 4

Хотя это старый пост, но я искал что-то подобное, заданное в вопросе,

Я и мозговой штурм havoked Интернета для решения и лучшим решения, которое я получил в том, чтобы импортировать пакет реагировать-нативные табличный компонент к моему проекту и подготовить достойный макет таблицы для моего приложения для отображения данных. Может быть, гораздо больше людей разберутся, как это сделать, и я могу рекомендовать эту ссылку на все ваши ответы: Эта ссылка - ссылка на установщик пакета npm, в которой есть объяснение всего кода и примеры.