如何实现React Native两行横向FlatList的时钟列表正确布局？

你的代码问题在于嵌套使用ScrollView和FlatList时，numColumns的作用是让FlatList纵向排列多列，而非实现两行横向滚动的布局。要实现目标样式，需要调整结构，让两行内容整体横向滚动：

修改后的代码 #

import React from "react"
import { ScrollView, Text, View } from "react-native"

const ScreenA = () => {
    const time = ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"]
    // 动态拆分数据为上下两行，兼容任意数量的时间项
    const rowLength = Math.ceil(time.length / 2);
    const topRow = time.slice(0, rowLength);
    const bottomRow = time.slice(rowLength);

    const renderTimeItem = (item) => (
        <View style={{ borderWidth: 1, width: 100, padding: 10, alignItems: "center" }}>
            <Text>{item}</Text>
        </View>
    )

    return (
        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
            <View style={{ flexDirection: "column" }}>
                {/* 第一行时间项 */}
                <View style={{ flexDirection: "row" }}>
                    {topRow.map((item, index) => (
                        <React.Fragment key={index}>{renderTimeItem(item)}</React.Fragment>
                    ))}
                </View>
                {/* 第二行时间项 */}
                <View style={{ flexDirection: "row" }}>
                    {bottomRow.map((item, index) => (
                        <React.Fragment key={index + rowLength}>{renderTimeItem(item)}</React.Fragment>
                    ))}
                </View>
            </View>
        </ScrollView>
    )
}

export default ScreenA

修改说明 #

1. 移除嵌套的FlatList：原方案中numColumns会让列表纵向展开多列，与需求的两行横向滚动逻辑冲突。
2. 拆分数据：将时间数组拆分为上下两个子数组，确保内容分为两行展示。
3. 调整布局结构：用横向ScrollView包裹一个纵向布局的容器，容器内包含两个横向排列的行，每行渲染对应子数组的时间项。
4. 通用化处理：通过Math.ceil(time.length / 2)计算每行长度，兼容任意数量的时间项，无需硬编码拆分位置。

内容的提问来源于stack exchange，提问作者Nemesis