我们如何在 react-native 中水平显示数据类别列表答案

【问题标题】：How can we show list of data Categories wise list horizontal in react- native我们如何在 react-native 中水平显示数据类别列表
【发布时间】：2018-07-25 07:03:13
【问题描述】：

我是 react-native 的新手，我需要基于类别的水平列表

我附上了图片，我不知道如何编写代码来设计这个组件。

我有不同的类别，如时尚、手表、包、衬衫、裤子、衣服、品牌等不同的类别明智地显示到里面的水平列表项目。

我没有提到代码，因为我不知道如何开始。

如果我点击查看全部按钮，则显示另一个屏幕/模型的网格集合列表

请给我样品或建议

这是我需要的图片：

【问题讨论】：

标签： listview react-native react-native-android react-native-ios react-native-flatlist

【解决方案1】：

您似乎已经了解 FlatLists，所以当您说您不知道从哪里开始时，我不明白您的意思... 尽管如此：

import React from 'react'
import { View, Text, FlatList } from 'react-native'

export default class TempScreen extends React.Component{

  constructor(props){
    super(props)
    this.state = {
      exampleData: [
        {name: 'Watch', price: '100'},
        {name: 'Big Watch', price: '888'},
        {name: 'Expensive Watch', price: '999999'},
        {name: 'Donald Trump', price: '-1'},
      ]
    }
  }

  render(){
    return(
      <View>
        <Text style = {{fontWeight: 'bold'}}>Fashion</Text>
        <FlatList 
          horizontal
          data = {this.state.exampleData}
          renderItem = {({item}) => 
            <View style = {{padding: 10}}>
              <View style = {{backgroundColor: 'white', borderWidth: 1, borderColor: '#626262', height: 50, width: 50}}/>
              <Text>{item.name}</Text>
              <Text>{item.price}</Text>
            </View>}
          />
      </View>
    )
  }
}

请告诉我它是否有效

【讨论】：

嗨，如果我想要更多像你提到的那样的显示，因为我有更多的类别。你只给了一个类别，但我有更多我怎样才能显示更多类别
您可以尝试使用SectionList
我试过部分列表，但它不能水平工作
如果你没有我的可以给我任何样品
你的意思是它不能水平工作？只需添加horizontal = { true }

【解决方案2】：

猜猜看，得到一个水平列表真的很容易！只需将水平属性添加到我们的列表中即可。

<FlatList
        horizontal
        data={this.state.data}
       .
       .
       .
       //whatever props you want to pass
      />
    );
  }
}

【讨论】：