Question

我正在出于学习目的开发React Native应用程序。现在，我在应用程序中使用FlatList。但是我有一个问题。我的平面列表没有滚动以查看所有项目。当我尝试将其滚动到屏幕尺寸之外时，它会弹回。我使用了在线找到的解决方案，将flex添加到根目录的1上，但是它不起作用。

这是我的代码：

class Events extends React.Component {
  static navigationOptions = {
    title: "Events"
  };

  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          id: 1,
          name: "Name 1"
        },
        {
          id: 2,
          name: "Name 2"
        },
        {
          id: 3,
          name: "Name 3"
        },
        {
          id: 4,
          name: "Name 4"
        },
        {
          id: 5,
          name: "Name 5"
        },
        {
          id: 6,
          name: "Name 6"
        },
        {
          id: 7,
          name: "Name 7"
        },
        {
          id: 8,
          name: "Name 8"
        },
        {
          id: 9,
          name: "Name 9"
        },
        {
          id: 10,
          name: "Name 10"
        },
        {
          id: 11,
          name: "Name 11"
        },
        {
          id: 12,
          name: "Name 12"
        },
        {
          id: 13,
          name: "Name 13"
        },
        {
          id: 14,
          name: "Name 14"
        },
        {
          id: 15,
          name: "Name 15"
        },
        {
          id: 16,
          name: "Name 16"
        },
        {
          id: 17,
          name: "Name 17"
        },
        {
          id: 18,
          name: "Name 18"
        },
        {
          id: 19,
          name: "Name 19"
        },
        {
          id: 20,
          name: "Name 20"
        },
        {
          id: 21,
          name: "Name 21"
        },
        {
          id: 22,
          name: "Name 22"
        },
        {
          id: 23,
          name: "Name 23"
        },
        {
          id: 24,
          name: "Name 24"
        }
      ]
    };
  }

  _handleLoadMore() {}

  renderItem(item) {
    return (
      <Card>
        <CardItem>
          <Left>
            <Thumbnail source={{ uri: "https://www.vkguy.co.uk/images/slideshow/05.jpg" }} />
            <Body>
              <Text>NativeBase</Text>
              <Text note>GeekyAnts</Text>
            </Body>
          </Left>
        </CardItem>
        <CardItem cardBody>
          <Image
            source={{ uri: "https://www.vkguy.co.uk/images/slideshow/05.jpg" }}
            style={{ height: 200, width: null, flex: 1 }}
          />
        </CardItem>
        <CardItem>
          <Left>
            <Button transparent>
              <Icon active name="thumbs-up" />
              <Text>12 Likes</Text>
            </Button>
          </Left>
          <Body>
            <Button transparent>
              <Icon active name="chatbubbles" />
              <Text>4 Comments</Text>
            </Button>
          </Body>
          <Right>
            <Text>11h ago</Text>
          </Right>
        </CardItem>
      </Card>
    );
  }

  render() {
    return (
        <FlatList
        contentContainerStyle={{
          flex: 1,
          flexDirection: "column",
          height: "100%",
          width: "100%"
        }}
        data={this.state.data}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => this.renderItem(item)}
        onEndReached={this._handleLoadMore}
      />
    );
  }
}

export default Events;

但是它不会滚动以查看屏幕外的项目。我该如何解决？

这是屏幕截图。我不能向下滚动更多。

Answer 1

在FlatList视图中更改某些样式，并将View添加为主容器

render() {
    return (
        <View style={{ flex: 1, width: '100%' }}>
            <FlatList 
                data={this.state.data}
                keyExtractor={item => item.id.toString()}
                renderItem={({ item }) => this.renderItem(item)}
                onEndReached={this._handleLoadMore}
            />
        </View>
    );
  }

Answer 2

尝试

<FlatList
    contentContainerStyle={{ flexGrow: 1, paddingBottom: 5 }}
    data={this.state.data}
    keyExtractor={item => item.id.toString()}
    renderItem={({ item }) => this.renderItem(item)}
    onEndReached={this._handleLoadMore}
    onEndReachedThreshold={0.5}
  />

React Native FlatList不滚动

2 个答案: