Расположение элементов сверху вниз с горизонтальной прокруткой

Question

Мне нужно отобразить 4 данные с вертикалью и поместить в горизонтальную прокрутку с реагирующим родом.

Например, мне нужно отобразить как это

Это текущий код, который я пробовал. Спасибо

 <ScrollView
                horizontal={true}
                >
                  <FlatList
                    contentContainerStyle={{
                      alignSelf: 'flex-start',
                      flexWrap:"wrap"
                    }}
                    numColumns={item.options.length / 4}
                    showsVerticalScrollIndicator={false}
                    showsHorizontalScrollIndicator={false}
                    data={item.options}
                    renderItem={itemLabel => this.renderFilterLabel(itemLabel)}
                  />
                </ScrollView>

Answer 1

это решение может вам помочь:)

render() {

        let arrayLength =Math.round(parseInt(this.state.data.length / 4))
        let columnsNumber = arrayLength % 4 === 0 ? arrayLength : arrayLength+1
        return (

          <View>
            <ScrollView
                horizontal={true}
              >
                <FlatList
                  numColumns={columnsNumber}
                  data={this.state.date}
                  renderItem={(itemLabel) => this._renderItems(itemLabel)}
                />
              </ScrollView>
          </View>
}

вы можете увидеть его здесь: https://i.stack.imgur.com/OeWb5.png