Gridview 在 React Native 中具有不同的高度和宽度

Question

在此处输入图片描述

任何人都可以告诉我如何在 React-Native 中创建这个设计

here is the design image

Answer 1

我找到了一个类似的线程希望这有帮助

标记将如下所示：

<View style={styles.wrapper}>
    <ScrollView contentContainerStyle={styles.container}>
        <ListView 
            contentContainerStyle={styles.list} 
            dataSource={this.state.dataSourceColumn1}
        />
        <ListView 
            contentContainerStyle={styles.list} 
            dataSource={this.state.dataSourceColumn2}
        />
        <ListView 
            contentContainerStyle={styles.list} 
            dataSource={this.state.dataSourceColumn3}
        />
    </ScrollView>
</View>

Wrapper View 将帮助您拉伸块以适合整个区域。从样式的角度来看，您可以使用 flexbox 解决任务：

wrapper: {
    flex: 1
},
container: {
    flexDirection: 'row',
    paddingHorizontal: 5
},
list: {
    flex: 1,
    flexDirection: 'column',
    paddingVertical: 10,
    paddingHorizontal: 5
}

诀窍在于我们将每一列都视为容器内的一行。尝试使用填充和 alignItems 样式来实现一致的间距。

请注意，ListView 附带的方便的 onEndReached 在这里不可用，因此您必须捕捉到用户到达 ScrollView 的末尾，以便知道何时需要新的提取。但这是一个不同的问题，我相信已经在其他地方得到了回答。如果网格是有限的并且您不需要将更多项目放入其中，事情就会更简单。只需按照上述方式拆分数据并使用 3 个带有嵌套项的 View-s 而不是 ListView-s。

现在您可以根据自己的要求进行编辑，轻松找到解决方法。

Answer 2

你的数组-

[item1, item2, item3, ....]

修改为-

[
{id, type:1, data:[item1, item2, item3] },
{id, type:2, data:[item4, item5, item6] },
{id, type:3, data:[item7, item8, item9] },
{id, type:1, data:[item10, item11, item12] }
{id, type:2, data:[item13, item14, item15] } 
...
...
]

就像，每个项目都有一个类型字段和 3 个项目的数组..

在 flatlist 或 scrollview 中使用此数据，您可以根据 type(1,2,3) 字段对其进行分类。

如果输入== 1 return 低于组件。

如果类型== 2 return

如果输入== 3 return

因此最终结果将如您所料..!

这只是一个想法！尝试实现。

为了获得更好的性能，您可以在从后端发送之前以这种格式构建数据。（如果数据作为任何 API 的一部分提供）

数据格式函数

const modifyData = (arr) => {
    let finalData = [];
    for (let i=0; i < arr.length; i+=3){
        let j = 0;
        let data = []
        while(j<3){
            arr[i+j] && data.push(arr[i+j]);
            j+=1;
        }
        finalData.push({id: Math.random().toString(), type: (i/3)%3 + 1, data})
    }
    return finalData;
}

使用一些随机 ID 生成器作为 ID（加密或 Math.random().toString()）

Gridview 在 React Native 中具有不同的高度和宽度

Grid View With different Hight and width in react Native

react-native

react-native-flatlist