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()}
                />

有人帮我。非常感谢。

谢谢

Answer 1

我希望这会有所帮助：

likeMovie(payload: Movie) {
    this.store.dispatch(new LikeMovie(payload));
  }

Answer 2

不幸的是，你可能已经猜到了numColumns道具只能在垂直FlatList工作。

多列只能用horizontal = {false}呈现，并且会之字形就像flexWrap布局。物品的高度均应相同- 不支持砌体布局。

实现所需目标的唯一方法是将第一个项目后的项目合并为两个。

因此，如果您有这样的数据集

let data = [
  { text: 'one' },
  { text: 'two' },
  { text: 'three' },
  { text: 'four' },
  { text: 'five' },
  { text: 'six' }
]

您需要将其转换为类似的内容，而不必这样做，这完全取决于您，但这是一种可能的方法。

let data = [
  { text: 'one' },
  { item1: { text: 'two' }, item2: { text: 'three' } },
  { item1: { text: 'four' }, item2: { text: 'five' } },
  { item1: { text: 'six' }},
]

组合物品进入的两种手段基团可以假你有一个网格布局。

然后所有神奇的事情都发生在您的renderItem函数中。还有，如果该指数为0，则可以显示你的大图片，然后如果这不是你能显示出更小的图像。

下面是一些示例代码，应该帮助你明白我在说什么。

import React, {Component} from 'react';
import { View, StyleSheet, Text, FlatList } from 'react-native';
export default class Screen1 extends React.Component {

  state = {
    data: [
      { text: 'one' },
      { item1: { text: 'two' }, item2: { text: 'three' } },
      { item1: { text: 'four' }, item2: { text: 'five' } },
      { item1: { text: 'six' }},
    ]
  }

  renderItem = ({item, index}) => {
    if (index === 0) {
      return (
        <View style={styles.bigSquare}>
          <Text>{item.text}</Text>
        </View>
      )
    } else {
      return (
        <View>
          <View style={styles.smallSquare}>
            <Text>{item.item1.text}</Text>
          </View>
          {item.item2 && <View style={[styles.smallSquare, {backgroundColor: 'red'}]}>
            <Text>{item.item2.text}</Text>
          </View>}
        </View>
      )
    }
  }

  keyExtractor = (item, index) => `${index}`;

  render() {
    return (
      <View style={styles.container}>
        <FlatList 
          horizontal={true}
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={this.keyExtractor}
        />
      </View>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  bigSquare: {
    height: 220, 
    width: 220, 
    margin: 10, 
    backgroundColor: 'yellow', 
    justifyContent: 'center', 
    alignItems: 'center'
  },
  smallSquare: {
    height: 100, 
    width: 100, 
    margin: 10, 
    backgroundColor: 'green', 
    justifyContent: 'center', 
    alignItems: 'center'
  }
});

下面是在快餐https://snack.expo.io/@andypandy/horizontal-flatlist-with-grid

FlatList Horizontal使一行中的两个项目连续

2 个答案:

FlatList Horizo​​ntal使一行中的两个项目连续

2 个答案:

FlatList Horizontal使一行中的两个项目连续