javascript - 屏幕中间的FlatList没有显示全部内容

就像我在上面说过的那样，我的问题是，位于屏幕中间并排到底部的FlatList没有显示我所拥有的最后一张卡片的全部内容。像这样：



如您所见，最后一张卡片缺少该图像，并且您可以看到具有上述卡片的3个操作按钮。所以我的问题是，我可以给扁平化样式什么样式，或者它是否具有解决此问题的属性。
在此先感谢您的帮助

编辑
这是我的代码（我认为相关的部分）：

return (
    <View>
      <View style={styles.topHeader}>
        <View style={styles.imageProfile}>

          {this.state.isLoaded ?
            this.props.isLogged ?
              <View>
                <View style={styles.imgContainer} style={{ alignItems: "center", marginBottom: 20 }}>
                  <Image style={styles.userImg} style={{ width: 100, height: 100, borderRadius: 50 }} source={{ uri: "data:image/png;base64," + this.state.user.picture }} />
                </View>
                <Text style={styles.name}>{this.state.user.name}</Text>
                <Text style={styles.subheaderText}>{arrayCounters}</Text>
              </View>
              :
              <View>
                <View style={styles.imgContainer} style={{ alignItems: "center", marginBottom: 20 }}>
                  <Image style={styles.userImg} style={{ width: 100, height: 100, borderRadius: 50 }} source={require("../../assets/no-user.jpg")} />
                </View>
                <TouchableOpacity onPress={this.logIn}>
                  <Text style={styles.subheaderText}>Iniciar sesión</Text>
                </TouchableOpacity>
              </View>
            : null}

          {!this.state.isLoaded &&
            <View style={styles.loading}>
              <ActivityIndicator size="large" color="#F5DA49" />
            </View>
          }
        </View>
      </View>
      <View style={styles.tabsContainer}>
        <TouchableOpacity onPress={() => this.changeTab(1)} style={[styles.tab, this.state.tabSelected === 1 && styles.tabSelected]}>
          <Text style={styles.tabText}>PÚBLICACIONES</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => this.changeTab(2)} style={[styles.tab, this.state.tabSelected === 2 && styles.tabSelected]}>
          <Text style={styles.tabText}>FAVORITOS</Text>
        </TouchableOpacity>
      </View>

      <View>


 <View>
{this.state.isLoadedMyPosts && this.state.tabSelected === 2 &&
 this.state.favoritesPosts &&
            <FlatList
              data={this.state.favoritesPosts}
              renderItem={({ item, separators }) => (
                <PostItem key={item._id} item={item} isTabFavorites=
                 {true} removedFav={this.removedFav.bind(this)} />

              )}
              keyExtractor={item => item._id}
              onEndReachedThreshold={0.5}
            />
        }

样式：

const styles = StyleSheet.create({
  noPosts: {
    alignItems: 'center',
    position: "relative",
    marginTop: 50
  },
  textNoPosts: {
    marginTop: 20,
    fontSize: 20
  },
  name: {
    fontSize: 18,
    color: "#FFF",
    marginBottom: 5
  },
  tabText: {
    color: "#262628",
    fontSize: 20
  },
  tabsContainer: {
    width: width,
    flexDirection: "row",
    marginBottom: 10
  },
  tab: {
    width: width / 2,
    backgroundColor: "#FFF",
    alignItems: "center",
    paddingVertical: 15
  },
  tabSelected: {
    borderBottomColor: '#F5DA49',
    borderBottomWidth: 4
  },
  loadingPosts: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 120,
    justifyContent: 'center',
    alignItems: 'center'
  },
  loading: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    opacity: 0.5,
    backgroundColor: 'black',
    justifyContent: 'center',
    alignItems: 'center'
  },
  topHeader: {
    backgroundColor: "#262628",
    width: width,
    height: 200
  },
  imageProfile: {
    justifyContent: "center",
    alignItems: "center",
    height: 200
  },
  userImg: {
    borderRadius: 50,
    alignItems: "center"
  },
  subheaderText: {
    color: "#fff"
  },
  imgContainer: {

  }
});

最佳答案

将整个视图包装在滚动视图中。我想应该可以

关于javascript - 屏幕中间的FlatList没有显示全部内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53462803/