Question

我想自定义一个屏幕：

所以我使用Flastlist并检查项目是否是我将使用item = window.with设置的标题，如果不是width item = window.width / 3。但它的错误。这是我的代码：

＆＃13;

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;

＆＃13;

和我的结果我有错误：项目不是标题是一行，但我想连续显示3个项目。

在flastlist中添加数字列= 3，代码为：

＆＃13;

 <FlatList
  numColumns={3}
  data={this.state.data}
  renderItem={({ item }) => (this.renderItem(item))}
  keyExtractor={item => item.name}
/>

＆＃13;

＆＃13; 我有结果

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

Answer 1

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

Answer 2

在主flexWrap: 'wrap'中使用flexDirection: 'row'和container可以解决您的问题。

<View style={{ flex: 1, backgroundColor: 'red', flexWrap: 'wrap', flexDirection: 'row' }}>
  <FlatList
    data={this.state.data}
    renderItem={({ item }) => (
      this.renderItem(item)
    )}
    keyExtractor={item => item.name}
  />
</View>

Answer 3

我已经使用嵌套FlatList 来解决此问题：

const renderCategory = category => (
    <View>
      <Text>{category}</Text>
      <FlatList
        data={itemsByCategory[category]}
        renderItem={({item, index}) => renderItem(item)}
        keyExtractor={(item, index) => index.toString()}
        numColumns={3}
      />
    </View>
  );

return (
    <FlatList
      data={Object.keys(itemsByCategory)}
      renderItem={({item, index}) => renderCategory(item)}
      keyExtractor={(item, index) => index.toString()}
    />
  );

反应原生Flatlist网格和项目标题

3 个答案: