所以我使用 FlaSTList 并检查项目是否是标题我将使用 item = window.with 设置,如果不是 width item = window.width/3。但它的错误。 这是我的代码:
const { width, height } = Dimensions.get("window")
class App extends React.Component {
constructor() {
super()
this.state = {
data: [
{ name: "Movies", header: true },
{ name: "Interstellar", header: false },
{ name: "Dark Knight", header: false },
{ name: "Pop", header: false },
{ name: "Music", header: true },
{ name: "Adams", header: false },
{ name: "Nirvana", header: false },
{ name: "Amrit Maan", header: false },
{ name: "Oye Hoye", header: false },
{ name: "Eminem", header: false },
{ name: "Places", header: true },
{ name: "Jordan", header: false },
{ name: "Punjab", header: false },
{ name: "Ludhiana", header: false },
{ name: "Jamshedpur", header: false },
{ name: "India", header: false },
{ name: "People", header: true },
{ name: "Jazzy", header: false },
{ name: "Appie", header: false },
{ name: "Baby", header: false },
{ name: "Sunil", header: false },
{ name: "Arrow", header: false },
{ name: "Things", header: true },
{ name: "table", header: false },
{ name: "chair", header: false },
{ name: "fan", header: false },
{ name: "cup", header: false },
{ name: "cube", header: false }
],
stickyHeaderIndices: []
};
}
renderItem(item) {
if (item.header) {
return (
<View style={{ width: width, height: 40, backgroundColor: 'green' }}>
<Text>{item.name}</Text>
</View>
)
} else {
return (
<View style={{
width: width / 3,
height: width / 3,
backgroundColor: 'white',
borderWidth: 1,
borderColor: 'gray'
}}>
<Text>{item.name}</Text>
</View>
)
}
}
render() {
return (
<View style={{ flex: 1, backgroundColor: 'red' }}>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
this.renderItem(item)
)}
keyExtractor={item => item.name}
/>
</View>
);
}
}
export default App;
和我的结果 我有错误:一个项目不是标题是一行,但我想连续显示 3 个项目。
当使用代码在 flaSTList 中添加数字列 = 3 时:
<FlatList
numColumns={3}
data={this.state.data}
renderItem={({ item }) => (this.renderItem(item))}
keyExtractor={item => item.name}
/>
如何解决连续显示 3 个项目的问题? 非常感谢。
最佳答案
我想你忘了在 Flatlist Prop 中添加 numColumns = { 3 }
。 Here您会得到问题的详细解决方案。
关于javascript - react native Flatlist 网格和项目标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49642869/