React Native：试图在滚动条上隐藏搜索栏

我目前正在尝试在滚动时隐藏搜索栏。

屏幕上显示的组件是顶部的搜索栏，然后是带有标签的水平滚动视图，然后是我的平面列表。

在当前的实现中，当我加载屏幕时，搜索栏将覆盖选项卡，而当我向下滚动时，搜索栏将隐藏并显示选项卡。

我想做的是，当我加载屏幕时，搜索栏，选项卡和列表的所有内容都应该可见，然后当我开始滚动搜索栏时隐藏，选项卡和列表的内容会填充顶部的可用空间。

另外，我遇​​到的另一个问题是当我不断向上滚动时，搜索栏会不断向上移动直到消失。

这是我的代码：

const scrollY = new Animated.Value(0)
const diffClamp=Animated.diffClamp(scrollY,0,100)
const translateY = diffClamp.interpolate({
inputRange:[0,100],
outputRange:[0,-100]
})

return(

<Animated.View style={{transform: 
    [{translateY:translateY}],elevation:4,zIndex:100}}>
    <SearchBar 
     containerStyle={{height:40,marginBottom:20,position:"absolute",
     left:0,right:0,top:0}} 
    inputContainerStyle={{height:40}}
    />
    </Animated.View>

    <View style={{paddingHorizontal:6}}>
    <ScrollView 
    horizontal 
    style={{
    marginBottom:10,
    height:30,
    }} 
    showsHorizontalScrollIndicator={false}
    >
    {categories.map(e=>(
            <TouchableOpacity 
            style={[
                {paddingHorizontal:10,paddingBottom:0},
                label===e.label && 
                {
                borderRadius:2,
                marginBottom:-20,
            }
                ]} 
                onPress={()=>}
                >
            <AppText>{e.label}</AppText>
            </TouchableOpacity>
    ))}
    </ScrollView>
    </View>
    <FlatList
      data={posts} // to have all the data
      keyExtractor={(post) => post.id.toString()}
      renderItem={({ item,index }) => (
       <Card
          title={item.title}
          subTitle={item.subTitle}
        />
      )}
      onScroll={(e)=>{
          scrollY.setValue(e.nativeEvent.contentOffset.y)
      }}
    />
)

位置：“绝对”，搜索栏位于选项卡的顶部，因此当我向下滚动搜索栏时，我尝试使用“相对”而不是位置：“绝对”，但选项卡上方有空白。

我还使用了react native elements搜索栏组件。

将不胜感激，在此先感谢您。

更新

在遵循了J.Doe解决方案（这是解决翻译问题的正确解决方案）之后，我现在面临与此相关的新问题。

由于我可以在scrollView的不同选项卡之间切换，因此每个选项卡都有其对应的Flatlist数据。如果FlatList包含3个以上的数据项，则该功能正常工作，但是如果包含1个或2个数据项，则转换功能将停止工作。

如果我位于选项卡1（具有许多数据项）上并向下滚动（即搜索栏已翻译），然后点击仅包含1个数据项的选项卡2，我将无法滚动屏幕来查看搜索栏。

这是我的代码：

const categories = [
{
  label: "Sports",
  id: 1,
},
{
  label: "News",
  id: 2,
},
{
  label: "Food",
  id: 3,
},
]

const[label,setLabel]=useState(categories[0]?.label)

const [currentCategoryId, setCurrentCategoryId] = useState(1)

const setLabelFilter=label=>{
setLabel(label)
}

const toggleBrands = (categoryId) => {
setCurrentCategoryId(categoryId)
};

这是我的scrollView：

<ScrollView 
    horizontal 
    style={{
    flexDirection:"row",
    alignContent:"center",
    marginTop: 20,// space between tabs and search bar
    height:30,
    }} 
    showsHorizontalScrollIndicator={false}
    >
    {categories.map((e)=>(
            <TouchableOpacity 
                key={e.id}
                onPress={()=>{
                    toggleBrands(e.id),
                    setLabelFilter(e.label)
                    }}
                selected={e.id === currentCategoryId}
                >
            <AppText style={[{fontWeight:"500"},label===e.label && {fontWeight:"700"}]}>{e.label}</AppText>
            </TouchableOpacity>
    ))}
    </ScrollView>