我是React-native的新手,我希望需要基于Categories明智的水平列表
我附加了Image,我不知道如何编写代码来设计该组件。
我有不同的类别,例如时装,手表,箱包,衬衫,裤子,布,品牌,例如,不同类别的品牌明智地显示在内部的水平列表项中。
我没有提到代码,因为我不知道如何从头开始。
如果我单击“查看所有”按钮,然后在另一个屏幕/模型中显示网格集合的列表
请给我样品或建议
答案 0 :(得分:0)
您似乎已经了解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>
)
}
}
请告诉我是否可行
答案 1 :(得分:0)
猜怎么着,获得水平清单真的很容易!只需将horizontal属性添加到我们的列表中即可。
<FlatList
horizontal
data={this.state.data}
.
.
.
//whatever props you want to pass
/>
);
}
}