React Native中ScrollView设置flexDirection与flexWrap后无法滚动

ScrollView无法滚动的核心诱因是你在contentContainerStyle中配置了flex:1属性，和flexDirection、flexWrap配置没有关系。
contentContainerStyle作用于ScrollView内部包裹所有子元素的内容容器，给这个容器设置flex:1会强制内容容器的高度和ScrollView本身的可视区域高度完全一致，哪怕子元素实际渲染高度超出，也会被约束在可视区域范围内，自然无法触发滚动逻辑——这也是你删掉换行相关样式后依然无法滚动的原因。

直接移除contentContainerStyle中的flex:1配置即可，其余横向换行的样式可以正常保留：

<View style={{flex:1}}>
  <ScrollView 
    vertical={true}
    contentContainerStyle={{ 
      borderWidth:1,
      // 移除原代码中此处的flex:1配置
      flexDirection:'row',
      flexWrap:'wrap',
      alignItems: 'flex-start',
      paddingBottom: 20 // 可选配置，避免最后一行内容贴底
    }}
  >
    {root.userStore.passionOptions.map((item) => {
      return (
        <Text 
          key={item} 
          onPress={() => Alert.alert('kaka')} 
          style={{ 
            fontSize:18,
            padding:5,
            paddingLeft:10,
            paddingRight:10,
            color:'rgb(125,125,125)',
            borderRadius:35,
            borderWidth:1,
            borderColor:'rgba(0,0,0,0.1)',
            margin:5 
          }}
        >
          {item}
        </Text>
      )
    })}
  </ScrollView>
</View>

避坑提示：如果是实现横向滚动的ScrollView，同理不要给contentContainerStyle加flex:1，否则会把内容容器宽度锁死为ScrollView可视宽度，同样会出现无法滚动的异常。

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