Как создать неорганизованную сетку в React Native

Question

Я работаю над проектом React Native, в котором мне нужно создать неорганизованное представление сетки. Пожалуйста, обратитесь к изображению.

grid view ">

Я понятия не имею, как добиться этого типа представления динамически с помощью следующих JSON данных.

categories: [
    {
        id: 1,
        title: 'Tolerance'
    },
    {
        id: 2,
        title: 'Equality'
    },
    {
        id: 3,
        title: 'Empowerment'
    },
    {
        id: 4,
        title: 'LGBTQ+'
    },
    {
        id: 6,
        title: 'Equal opportunity'
    },
    {
        id: 5,
        title: 'Success stories'
    },
    {
        id: 7,
        title: 'News'
    },
    {
        id: 8,
        title: 'Inclusivity'
    },
    {
        id: 9,
        title: 'People'
    },
    {
        id: 18,
        title: 'Jobs'
    },
    {
        id: 10,
        title: 'Consciousness'
    },
    {
        id: 11,
        title: 'Responsibility'
    },
    {
        id: 12,
        title: 'Diversity'
    },
    {
        id: 13,
        title: 'Networking'
    },
    {
        id: 14,
        title: 'Lifestyle'
    },
    {
        id: 15,
        title: 'Pride'
    },
    {
        id: 16,
        title: 'Economy'
    },
    {
        id: 17,
        title: 'Climate'
    }
]

Сейчас я использую отдельный TextView с отдельными щелчками вручную. Мне нужно сделать это динамически, так как я получаю этот список с сервера.

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

Answer 1

Что вы можете сделать, так это получить данные с сервера и сохранить их в Redux. После этого загрузите данные в компонент, сопоставьте его и создайте макет с помощью Flexbox.