Как автоматически настроить ширину ячейки в компоненте таблицы React Native, построенном с использованием FlatList? - PullRequest
Новая
       10

Как автоматически настроить ширину ячейки в компоненте таблицы React Native, построенном с использованием FlatList?

0 голосов
/ 10 апреля 2019

Я построил простой компонент таблицы, используя React Native, используя FlatList: 

import React, { Component } from "react";
import PropTypes from "prop-types";

import { Text, View, StyleSheet, FlatList } from "react-native";

class Table extends Component {

    render() {

        let title = <Text style={styles.cell}>TABLE TITLE:</Text>;
        let data = [
            {
                id: "1",
                content: <Text style={styles.cell}>COL1</Text>
            },
            {
                id: "2",
                content: <Text style={styles.cell}>COL2</Text>
            },
            {
                id: "3",
                content: <Text style={styles.cell}>COL3</Text>
            },
            {
                id: "4",
                content: <Text style={styles.cell}>COL4</Text>
            },
            {
                id: "5",
                content: <Text style={styles.cell}>COL5</Text>
            },
            {
                id: "6",
                content: <Text style={styles.cell}>COL6</Text>
            },
            {
                id: "11",
                content: <Text style={styles.cell}>C1</Text>
            },
            {
                id: "12",
                content: <Text style={styles.cell}>CELL NUMBER 2 (BIG CELL)</Text>
            },
            {
                id: "13",
                content: <Text style={styles.cell}>CELL NUMBER 3</Text>
            },
            {
                id: "14",
                content: <Text style={styles.cell}>CELL NUMBER 4 (BIG CELL)</Text>
            },
            {
                id: "15",
                content: <Text style={styles.cell}>CELL NUMBER 5</Text>
            },
            {
                id: "16",
                content: <Text style={styles.cell}>CELL NUMBER 6</Text>
            }
        ];        

        return (
            <View style={styles.table}>
                <View style={styles.title}>{title}</View>
                <FlatList
                    data={data}
                    keyExtractor={item => item.id}
                    numColumns={6}
                    renderItem={({ item }) => {
                        return <View style={styles.cell}>{item.content}</View>;
                    }}
                />
            </View>
        );
    }
}

export default Table;

const styles = StyleSheet.create({
    table: {
        flexDirection: "column",
        justifyContent: "flex-start",
        backgroundColor: "black"
    },
    cell: {
        flex: 1,
        fontSize: 12,
        color: "white"
    },
    title: {
        flexDirection: "row",
        justifyContent: "flex-start"
    }
});

А вот и результат:

Result Screen

Мне нужно автоматически настроить ячейки в соответствии с их шириной, чтобы лучше использовать горизонтальное пространство.

В моем примере первая ячейка (COL1 / C1) больше, чем необходимо, в то время как более крупные ячейки (COL2 и COL4) заключены в 3 строки. Естественно, это потому, что все ячейки имеют одинаковое свойство flex: 1.

Есть ли способ автоматически настроить ширину ячейки, как это будет делать таблица CSS / HTML автоматически? Что нужно изменить в моем коде, чтобы это разрешить?

...