如何在React Native中创建无组织的网格视图

问题描述 投票:0回答:1

我正在一个React Native项目中,我需要在其中创建一个无组织的网格视图。请参考图片。

the multi selection <code>grid view</code>

我不知道如何使用下面的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和手动的单独点击。从服务器获取此列表时,我需要动态创建它。

我担心的是,是否有可能提出这种观点,或者我是否需要继续研究目前正在采用的方法?

javascript react-native gridview react-native-flatlist ui-design
1个回答
0
投票

您可以做的是从服务器获取数据并将其存储在Redux中。之后,将数据导入组件,将其映射并使用Flexbox创建布局。

© www.soinside.com 2019 - 2024. All rights reserved.