react-native - FlatList Horizo​​ntal 在一行中的一列中创建两个项目

Question

只需要一点样式指导。我需要的是制作水平平面列表，其中第一个项目的高度应该很大，然后其他项目的列应该是 2，依此类推。

我附上了我现在拥有的和我想要的图像。

我取得了什么

我想要的是

还有我的代码

<FlatList
                    horizontal
                    data={this.state.entries}
                    showsHorizontalScrollIndicator={false}
                    contentContainerStyle={{
                    }}
                    renderItem={({ item: rowData }) => {
                        return (
                            <TouchableOpacity
                                key={rowData.title} onPress={() => alert(rowData.title)}>
                                <Card>
                                    <CardItem cardBody>
                                        <Image source={{ uri: rowData.ImagePath }}
                                            style={{
                                                height: (rowData.id == 1 ? 200 : 90),
                                                width: (rowData.id == 1 ? 200 : 150),
                                                flex: 1
                                            }} />
                                    </CardItem>
                                </Card>
                            </TouchableOpacity>
                        );
                    }}
                    keyExtractor={(item, index) => index.toString()}
                />

任何人都帮帮我。非常感激。

谢谢

标签： react-nativereact-native-flatlist

Answer 1

我希望这有帮助：

<FlatList
      horizontal
      data={this.state.entries}
      contentContainerStyle={{ flexWrap: "wrap", flexDirection: "column" }}
      renderItem={({ item: rowData }) => {
            return (
                 <TouchableOpacity>
                      <Card>
                          <CardItem cardBody>
                               <View
                                 style={{
                                        height: rowData.id == 1 ? 200 : 90,                                                                                
                                        width: rowData.id == 1 ? 200 : 150,
                                        borderWidth: 1,
                                  }}
                             />
                        </CardItem>
                    </Card>
               </TouchableOpacity>
              );
          }}
/>