React Native中的FlatList不会滚动，但是会显示项目

Question

我想获得一个水平Flatlist，这是我的代码：

export default class Avatar extends Component {
  _renderItem = ({ item }) => {
    return (
      <View style={{ alignItems: 'center', paddingRight: 8 }}>
        <Svg width="72" height="72">
          <Defs>
            <LinearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
              <Stop offset="0%" stopColor={colors.gradient.primary} />
              <Stop offset="100%" stopColor={colors.gradient.secondary} />
            </LinearGradient>
          </Defs>
          <Circle
            cx="36"
            cy="36"
            r="34"
            strokeWidth="3"
            fill="none"
            stroke="url(#grad)"
          />
        </Svg>
        <Image
          source={{ uri: item.url }}
          style={{ width: 60, height: 60, borderRadius: 30, marginTop: -66 }}
        />
        <Text style={styles.timeStyle}>{item.time}</Text>
        <Text style={styles.NameStyle}>{item.name}</Text>
      </View>
    );
  };

  _keyExtractor = (item, index) => item.id;

  render() {
    return (
      <View style={{ paddingLeft: 10, flex: 1 }}>
        <Text style={styles.TitleStyle}>Avatar</Text>
        <FlatList
          style={{ flex: 1 }}
          horizontal={true}
          data={items}
          keyExtractor={this._keyExtractor}
          renderItem={itemData => this._renderItem(itemData)}
        />
      </View>
    );
  }
}

这是我的数组：

items = [
  {
    id: 1,
    name: 'Gandalf',
    time: '1 min ago',
    url: 'https://vignette.wikia.nocookie.net/lotr/images/e/e7/Gandalf_the_Grey.jpg/revision/latest?cb=20121110131754',
  },
]

用scrollView替换平面列表也不起作用，同时剪切svg和图像也没有什么区别，有人可以帮忙吗？

Answer 1

您需要将ScrollView与horizo​​ntal = {true}一起使用。 这是一些可以帮助您的代码：

<ScrollView horizontal={true}>
        <FlatList
          style={{ flex: 1 }}
          horizontal={true}
          data={items}
          keyExtractor={this._keyExtractor}
          renderItem={itemData => this._renderItem(itemData)}
        />
        </ScrollView>

它像那样工作。希望对您有帮助