React Native中ScrollView无法滚动，添加flex后Stories组件消失如何解决

问题根源 #

你遇到的两个问题核心都是布局约束异常：

• 给ScrollView加flex:1后组件消失：flex:1会让组件占满父容器所有可用空间，但你外层包裹的View只设置了marginBottom:13，没有明确高度，父容器本身高度为0，ScrollView自然无法渲染可见。
• ScrollView无法滚动：横向ScrollView需要明确的高度约束才能正常计算布局、触发滚动逻辑，你当前的外层容器没有高度设置，ScrollView布局计算异常。

解决方法 #

方案一：给外层容器设置固定高度（最推荐） #

横向滚动的ScrollView不需要加flex:1，直接给外层View设置一个能容纳头像+文字的固定高度即可，你的单条内容总高度约90，修改外层View样式即可：

<View style={{marginBottom:13, height: 90 }}>

修改后不需要改动ScrollView的属性，就能正常滚动。

方案二：适配flex布局父容器 #

如果你的Stories组件放在flex:1的页面容器中，不想写死高度，可以给外层View加flexShrink: 0属性，避免组件被父容器压缩：

<View style={{marginBottom:13, flexShrink: 0 }}>

验证注意事项 #

• 确认USERS数组的长度足够，至少超出当前屏幕可展示的头像数量，才会触发滚动效果
• 不要给横向ScrollView加flex:1属性，该属性仅适用于需要占满剩余高度的纵向ScrollView场景

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