React Native Flexwrap 中断 ScrollView 不会滚动答案

【问题标题】：React Native Flexwrap breaks ScrollView wont scrollReact Native Flexwrap 中断 ScrollView 不会滚动
【发布时间】：2021-05-30 15:19:42
【问题描述】：

我试图让我的物品水平包装，他们做到了。只有当我添加 flexWrap: "wrap" 时，滚动视图才会决定根本不滚动。

<ScrollView contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex- 
     start',}}>  
    <FrameComponent />
    <FrameComponent />
    <FrameComponent />
    <FrameComponent />
    <FrameComponent />
    ...
</ScrollView>

使用 FrameComponent 渲染

<View>
    <Text>
        ...
    </Text>
<View>

框架组件的样式是一些简单的 flex 和 margin 的东西。

这与所有其他设置一起滚动，但是一旦我添加了 flexWrap，它就会变得很糟糕。

谢谢。

【问题讨论】：

好的，所以我扩展了在屏幕上绘制的组件数量，它确实滚动了，它只是没有达到开始滚动的限制。它似乎是在扩展滚动窗格的高度，而不是将其放入自然位置。有什么想法可以解决这个问题吗？

标签： react-native flexbox scrollview

【解决方案1】：

将 Horizontal = {true} 属性传递给 ScrollView 并移除 flex wrap 和 flexDirection 样式。

<ScrollView horizontal = {true}>
...
</ScrollView>

Horizontal ScrollView in React Native

【讨论】：