React Native Flatlist ListHeaderComponent 不起作用

Question

ListHeaderComponent 内的flatlist 不起作用。它不会在标题中呈现任何内容（flatlist 以上）。但是，如果我放置一些自定义组件，它确实可以工作，但它不适用于我的 renderHeader 函数。我尝试制作一个与renderHeader 具有相同视图的自定义组件，但是当我使用它时没有渲染所以我不知道

我的平面列表以及整个渲染：

   render() {
          const { height } = Dimensions.get("window");
          return (
            <View style={{flex: 1,
              backgroundColor: "#EBECF4"}}>
              {/* <Text>
              Connection Status :{" "}
              {this.state.connection_status ? "Connected" : "Disconnected"}
            </Text> */}
    
              {/* <Loader loading={this.state.loading} /> */}
              <StatusBar backgroundColor="#63003d" barStyle="light-content" />
              <SafeAreaView>
                <ModernHeader
                  backgroundColor="#63003d"
                  height={50}
                  text="Eleph"
                  textStyle={{
                    color: "white",
                    fontFamily: "Lobster-Regular",
                    //fontWeight: "bold",
                    fontSize: 25,
                  }}
                  leftIconComponent={
                    <TouchableOpacity
                      style={{ marginRight: 0, margin: 0 }}
                      onPress={() =>
                        this.props.navigation.dispatch(DrawerActions.openDrawer())
                      }
                    >
                      <FontAwesome5 name="bars" size={22} color="white" />
                    </TouchableOpacity>
                  }
                  rightIconComponent={
                    <TouchableOpacity
                      style={{ marginLeft: 0, margin: 0 }}
                      onPress={() => this.props.navigation.navigate("Profile")}
                    >
                      {/* <MaterialCommunityIcons
                      name="chart-areaspline"
                      size={24}
                      color="#639dff"
                    /> */}
                      <Foundation name="graph-bar" size={24} color="white" />
                      {/* <FontAwesome name="bar-chart" size={24} color="white" /> */}
                    </TouchableOpacity>
                  }
                />
              </SafeAreaView>
    
                <FlatList
                
                  //contentInset={{ top: HEADER_HEIGHT }}
                  //contentOffset={{ y: -HEADER_HEIGHT }}
data={this.state.post}
              extraData={this.state.post}
              keyExtractor={(item) => item.id.toString()}  
              style={{
                marginHorizontal: 0,
                marginVertical: 6,
              }}
              renderItem={({ item }) => this.renderPost(item)}
              ListFooterComponent={this.renderFooter}
              ListHeaderComponent={this.renderHeader}
              refreshControl={
                <RefreshControl
                  style={{ color: "#639dff" }}
                  tintColor="#639dff"
                  titleColor="#fff"
                  refreshing={this.state.isLoading}
                  onRefresh={this.onRefresh}
                />
              }
              initialNumToRender={7}
              onEndReachedThreshold={0.1}
              showsVerticalScrollIndicator={false}
              onEndReached={() => {
                if (
                  !this.onEndReachedCalledDuringMomentum &&
                  !this.state.isMoreLoading
                ) {

                  this.getMore();
                }
              }}
              onMomentumScrollBegin={() => {
                this.onEndReachedCalledDuringMomentum = false;
              }}
              onScroll={(e) => {
                scrollY.setValue(e.nativeEvent.contentOffset.y);
              }}
            ></FlatList>
            {/* <View style={styles.footer}>
            <TouchableOpacity
              activeOpacity={0.9}
              onPress={this.getMore}
              style={styles.loadMoreBtn}
            >
              <Text style={styles.btnText}>See more moods</Text>
              {this.state.loading ? (
                <ActivityIndicator color="white" style={{ marginLeft:8 }} />
              ) : null}
            </TouchableOpacity>
          </View> */}
        
          </SafeAreaView>
         
        </View>

我的 renderHeader 函数：

renderHeader = () => {
    return (

    <View
    style={{
    flex: 1,
    flexDirection: "row",
    backgroundColor: "#ffffff",
    //width: "100%",
    padding: 11,
    alignItems: "center",
    position: "absolute",
    justifyContent: "center",
    //top: 50,
    //bottom: 0,
    //left: 0,
    //elevation: 4,
    //right: 0,
    //height: 50,
  }}

  //flexDirection: "row",
  //backgroundColor: "#ffffff",
  //width: "100%",
  //padding: 11,
  //alignItems: "center",
>
 
  <TouchableOpacity
    onPress={() => this.props.navigation.navigate("Post")}
  >
    <Text
      style={{ alignItems: "center", color: "#C4C6CE" }}
      //placeholder={How are you feeling right now ${this.state.user.name}?}
      multiline
    >{Tell us how are you feeling right now ${this.state.user.name}?}</Text>
  </TouchableOpacity>

  {/* <View style={styles.divider}></View> */}
</View>
    );
  }

为什么例如 renderFooter 有效？？

renderFooter = () => {
    if (!this.state.isMoreLoading) return true;

    return (
      <ActivityIndicator
        size="large"
        color={"#D83E64"}
        style={{ marginBottom: 10 }}
      />
    );
  };

Answer 1

使用ListHeaderComponentStyle 设置 ListHeaderComponent 的样式。

Answer 2

我为你做了一个简单的零食，看看这是否有帮助。您的代码看起来不错，但不确定整个屏幕设计。这是我的零食链接。 https://snack.expo.io/@saad-bashar/excited-fudge

它可能与屏幕内的其他组件有关。所以首先只检查 flatlist，删除所有其他组件。希望你能解决:)

Answer 3

解决办法是去掉flatlist表头中的“absolute”样式。问题是我的问题，我只是用不同的帐户回答，但这是有效的解决方案。