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

您可以在这里看到它： https://i.stack.imgur.com/OeWb5.png

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

1 个答案: