使用水平滚动视图从上到下排列元素

Question

我需要垂直显示 4 个数据并使用 react-native 放入水平滚动视图。

例如我需要像这样显示https://css-tricks.com/arranging-elements-top-bottom-instead-left-right-float/

这是我尝试过的当前代码。谢谢

 <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>
  )
}

你可以在这里看到：