javascript - Show search bar when scroll to a specific Offset y

Question

I'm using a flatlist in React Native. I want to show a search bar instead of icons when the user scrolls down and reaches offset.y >= 70, and to switch it back then offset.y < 0. I tried setting an onScroll in my flatlist which calls my function :

 <FlatList
              
   onScroll={showSearchBar}
   scrollEnabled={false}
   data={products}
   numColumns={2}
   keyExtractor={(item) => item.id.toString()}
   renderItem={___}
   onEndReachedThreshold={0.09}
   onEndReached={() => {
   getNewData();
              }}
            />

const showSearchBar = (e) => {
 if (Math.floor(e.nativeEvent.contentOffset.y) >= 70)
 {
   setShowSearch(true);
 }
 else
 {
   setShowSearch(false);
 }
}

      <Stack.Screen
........................
          headerRight: () => {
            if (showSearch) {
              <View>
                <Text>
                 search bar
                </Text>
              </View>
            } else {
              <TouchableOpacity onPress={() => navigation.navigate("about")}>
                <AntDesign
                  name="questioncircleo"
                  size={30}
                  color="white"
                  style={{
                    marginRight: 15,
                    justifyContent: "center",
                  }}
                />
              </TouchableOpacity>;
            }
          },
          title: "",
        })}
        name="home"
        component={Home}
      />

…but it didn't work correctly. I tried while do and switch case but always it showed the bar search when scrolling stopped... otherwise it keeps showing the icons.

Answer 1

等待大神答复