Question

在此处输入图片说明

谁能告诉我如何在 React-Native 中创建这个设计

Answer 1

我找到了一个类似的帖子，希望对您有所帮助

Grid layout with different height items (React Native)

标记将如下所示：

<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) 字段对其进行分类。

如果 type == 1 返回下面的组件。

如果 type == 2 返回

如果 type == 3 返回

所以最终的结果会像你期望的那样......！

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

为了获得更好的性能，您可以在从后端发送之前以这种格式构建数据。（如果数据作为任何 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 生成器（crypto 或 Math.random().toString()）

React Native中具有不同高度和宽度的网格视图

2 个答案: