【问题标题】：React Native content is not going to the next rowReact Native 内容不会进入下一行
【发布时间】：2020-04-18 14:11:20
【问题描述】：

我目前面临样式问题。

我想达到什么目的

我想显示电影列表。

每行应该放映两到三部电影（取决于设备上的可用空间）。

如果列表太长，那么用户应该能够垂直滚动。

现状

电影列表不分到下一行。

See for yourself, the picture describes the issue the best

我用来实现目标的代码

                <ScrollView style={styles.moviesContainer} contentContainerStyle={{flexDirection: "row"}}>
                    <Movie></Movie>
                    <Movie></Movie>
                    <Movie></Movie>
                    <Movie></Movie>
                    <Movie></Movie>
                    <Movie></Movie>
                </ScrollView>

^ moviesContainer 样式只包含一些边距/边框。

我希望有人可以帮助我解决这个问题，但是如果有不清楚的地方，请告诉我，以便我可以将其添加到这个问题中！

【问题讨论】：

你为父母尝试过flexWrap: 'wrap'的风格吗？
你的意思是在ScrollView上？ @VahidAl

标签： reactjs typescript react-native

【解决方案1】：

在滚动视图上使用flexWrap 和flexDirection。

<ScrollView contentContainerStyle={styles.container}>
  <Movie />
  <Movie />
  <Movie />
  <Movie />
  <Movie />
  <Movie />
  <Movie />
</ScrollView>

容器样式

const styles = StyleSheet.create({
  container: {
    flexWrap: 'wrap',
    flexDirection: 'row',
  }
});

DEMO

【讨论】：

【解决方案2】：

试试这个：

JSX

<ScrollView style={styles.container}>
  <Movie></Movie>
  <Movie></Movie>
  <Movie></Movie>
  <Movie></Movie>
  <Movie></Movie>
  <Movie></Movie>
</ScrollView>

风格：

container: {
  flex: 1,
  flexDirection: 'column',
},

【讨论】：

嘿马赫迪。谢谢你的反应。我以前试过这个，但这只是给了我一个垂直列表。图片：imgur.com/a/w8CE6Tr。这很好用，因为你可以滚动等。但它应该给我每行更多的电影，因为我还有更多的空间。