嵌套FlatList均设横向滚动，内层FlatList始终竖向滚动问题求助

问题出在内层横向FlatList缺少明确的布局约束：外层横向FlatList的item容器（黄色Layout）没有设置高度，导致内层FlatList无法正确识别横向布局的主轴方向，自动 fallback 到竖向滚动。

修复方案（基于FlatList） #

给内层FlatList的父容器设置固定高度，或者直接给内层FlatList指定高度，就能让它正常横向滚动：

<Layout style={{ flex: 1, backgroundColor: "red" }}>
    <FlatList 
        data={["lahore", "lahore2", "lahore3", "lahore4"]} 
        pagingEnabled
        horizontal
        renderItem={(info) => (
            {/* 给外层item容器设置固定高度 */}
            <Layout style={{ width: 300, backgroundColor: "yellow", margin: 10, height: 80 }}>
                <Text style={{ marginHorizontal: 20 }}>{info.item}</Text>
                <FlatList 
                    data={["item1", "item2", "item3", "item4", "item5", "item6"]}
                    horizontal
                    style={{ marginTop: 10 }}
                    renderItem={(info) => (
                        <Text style={{ marginHorizontal: 20 }}>{info.item}</Text>
                    )} 
                />
            </Layout>
        )} 
    />
</Layout>

如果不想给父容器固定高度，也可以直接给内层FlatList加高度样式：

<FlatList 
    data={["item1", "item2", "item3", "item4", "item5", "item6"]}
    horizontal
    style={{ height: 40, marginTop: 10 }}
    renderItem={(info) => (
        <Text style={{ marginHorizontal: 20 }}>{info.item}</Text>
    )} 
/>

替代方案（用ScrollView实现） #

如果不需要FlatList的复用特性，用横向ScrollView更简洁，效果一致：

<Layout style={{ flex: 1, backgroundColor: "red" }}>
    <ScrollView horizontal pagingEnabled style={{ flex:1 }}>
        {["lahore", "lahore2", "lahore3", "lahore4"].map((city, index) => (
            <Layout key={index} style={{ width: 300, backgroundColor: "yellow", margin: 10, height: 80 }}>
                <Text style={{ marginHorizontal: 20 }}>{city}</Text>
                <ScrollView horizontal style={{ marginTop:10 }}>
                    {["item1", "item2", "item3", "item4", "item5", "item6"].map((item, idx) => (
                        <Text key={idx} style={{ marginHorizontal: 20 }}>{item}</Text>
                    ))}
                </ScrollView>
            </Layout>
        ))}
    </ScrollView>
</Layout>

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