反应原生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}
/>

我有结果

如何连续修复show 3项目？非常感谢你.

Answer 1

我认为您忘记添加numColumns = { 3 }Flatlist 道具。在这里您可以获得问题的详细解决方案。