React Native同方向嵌套FlatList失败：父横向子却纵向

我看你遇到了嵌套FlatList的方向坑——父级明明是横向布局，但子FlatList设置了horizontal={true}却还是纵向显示。这在React Native里挺常见的，我来帮你一步步排查修复：

核心问题分析 #

当FlatList开启horizontal={true}时，它的布局主轴会切换为横向，但如果不给它设置明确的高度，父容器的flex布局可能会把它的高度强行拉伸，导致它无法正常横向展开，反而呈现纵向排列的效果。另外你代码里还有个小语法错误，也可能干扰渲染结果。

具体修复步骤 #

1. 先修正语法错误 #

你代码里的data数组多了一个闭合大括号，先把这个低级错误改过来：

data={[{k:'A'},{k:'b'},{k:'c'}]} // 去掉多余的}

2. 给子FlatList设置固定高度 #

给横向的子FlatList添加明确的高度样式，让它有固定的纵向空间，这样横向布局逻辑才能正常生效：

<FlatList
  ref='scrollPick'
  data={[{k:'A'},{k:'b'},{k:'c'}]}
  horizontal={true}
  style={{height: 40}} // 添加固定高度，数值可按需调整
  renderItem={(rate)=>{
    return (
      <View style={{paddingHorizontal: 15, justifyContent: 'center'}}>
        <Text>{rate.item.k}</Text>
      </View>
    );
  }}
  keyExtractor={(item, index) => index.toString()} // 转成字符串避免警告
/>

3. 优化父容器的布局约束 #

父View的flex:1可能会让子FlatList的高度被无限制拉伸，如果你不需要父View占满剩余空间，可以调整它的样式，比如去掉flex:1，或者给父View也设置明确高度：

<View key={question.item.code} style={{width: 350, height: 60}}> // 替换原有的flex:1,width:350
  {/* 子FlatList */}
</View>

4. 可选：添加滚动指示器方便调试 #

给子FlatList加上横向滚动指示器，能直观确认横向布局是否生效：

<FlatList
  // ...其他属性
  showsHorizontalScrollIndicator={true}
/>

完整修复后的代码片段 #

renderSlides(question) {
  return (
    <View key={question.item.code} style={{width: 350, height: 60}}>
      <FlatList
        ref='scrollPick'
        data={[{k:'A'},{k:'b'},{k:'c'}]}
        horizontal={true}
        style={{height: 40}}
        showsHorizontalScrollIndicator={true}
        renderItem={(rate)=>{
          return (
            <View style={{paddingHorizontal: 15, justifyContent: 'center', height: '100%'}}>
              <Text>{rate.item.k}</Text>
            </View>
          );
        }}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  )
}

这样调整后，子FlatList应该就能正常横向滚动显示了。如果还是有问题，可以检查父级FlatList的布局，确保它没有给子View添加额外的纵向约束。

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