javascript - react native Flatlist 网格和项目标题

Question

我想自定义一个屏幕:

所以我使用 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 个项目的问题？非常感谢。

Answer 1

我想你忘了在 Flatlist Prop 中添加 numColumns = { 3 } 。 Here您会得到问题的详细解决方案。