Я хотел бы отображать содержимое ScrollView по горизонтали и переносить их на новую строку, когда они достигают правого края. Например,
|One Two Three Four Five|
|Six Seven Eight Nine |
|Ten |
| |
где вертикальные трубы - это края экрана.
Я пытался возиться с гибкими стилями ScrollView и его дочерних элементов, но, увы, ничего не сработало. Я также пытался использовать horizontal = {true}
в ScrollView, но это не дает эффекта переноса, и я хочу, чтобы он был прокручиваемым по вертикали.
Вот упрощенная версия моего кода:
<ScrollView style = {{flex: 1, flexDirection: "row", flexWrap: "wrap"}}>
<View><Text>One</Text></View>
<View><Text>Two</Text></View>
<View><Text>Three</Text></View>
...
<View><Text>Ten</Text></View>
</ScrollView>
и это то, что производит этот код.
|One |
|Two |
|Three |
|Four |
|Five |
|Six |
|Seven |
|Eight |
|Nine |
|Ten |
| |
Буду очень признателен за мысли о том, как добиться желаемого эффекта. Спасибо!
Вам просто нужно использовать contentContainerStyle
на ScrollView
вместо style
<ScrollView contentContainerStyle = {{flex: 1, flexDirection: "row", flexWrap: "wrap"}}>
...
Не могли бы вы попробовать FlatList и его реквизит numColumns = {5}? Согласно этой документации facebook.github.io/react-native/docs/flatlist#numcolumns