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: {

  }
});

标签： javascriptreact-nativereact-native-flatlist

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

问题描述

解决方案

推荐阅读