我们如何显示数据列表类别明智的反应水平列表

Question

我是React-native的新手，我希望需要基于Categories明智的水平列表

我附加了Image，我不知道如何编写代码来设计该组件。

我有不同的类别，例如时装，手表，箱包，衬衫，裤子，布，品牌，例如，不同类别的品牌明智地显示在内部的水平列表项中。

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

如果我单击“查看所有”按钮，然后在另一个屏幕/模型中显示网格集合的列表

请给我样品或建议

这是我的必填图片：

Answer 1

您似乎已经了解FlatList，所以当您说不知道从哪里开始时，我不知道您的意思。 不过：

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

请告诉我是否可行

Answer 2

猜怎么着，获得水平清单真的很容易！只需将horizo​​ntal属性添加到我们的列表中即可。

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