React native：尝试在滚动时隐藏搜索栏

Question

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

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

在当前的实现中，当我加载屏幕时，搜索栏会覆盖标签，当我向下滚动时，搜索栏会隐藏并出现标签。

我想要做的是，当我加载屏幕时，搜索栏、选项卡和平面列表都应该可见，然后当我开始滚动搜索栏时隐藏并且选项卡和平面列表填充顶部的可用空间。

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

这是我的代码：

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 元素搜索栏组件。

将不胜感激任何可能的帮助，在此先感谢您。

更新

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

由于我可以在滚动视图中的不同选项卡之间切换，因此每个选项卡都有其对应的平面列表数据。如果 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 
    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> 

Answer 1

import React from 'react';
import {
  View,
  Animated,
  Text,
  StyleSheet,
  ScrollView,
  RefreshControl,
} from 'react-native';

const data = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

const App = () => {
  const scrollY = React.useRef(new Animated.Value(0)).current;
  const diffClamp = Animated.diffClamp(scrollY, 0, 100);

  const translateY = diffClamp.interpolate({
    inputRange: [0, 100],
    outputRange: [0, -60],
    extrapolate: 'clamp',
  });

  const marginTop = diffClamp.interpolate({
    inputRange: [0, 100],
    outputRange: [0, -60],
    extrapolate: 'clamp',
  });

  const paddingTop = diffClamp.interpolate({
    inputRange: [0, 100],
    outputRange: [10, 110],
    extrapolate: 'clamp',
  });

  const opacity = diffClamp.interpolate({
    inputRange: [0, 100],
    outputRange: [1, 0],
    extrapolate: 'clamp',
  });

  const renderItem = ({item}) => {
    return (
      <View style={styles.card}>
        <Text>{`Card ${item}`}</Text>
      </View>
    );
  };

  return (
    <View style={{flex: 1, backgroundColor: 'red'}}>
      <Animated.View
        style={{
          zIndex: 100,
          paddingBottom: 10,
          transform: [{translateY}],
        }}>
        <Animated.View style={[styles.searchBar, {opacity}]}>
          <Text>Search Bar</Text>
        </Animated.View>
        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
          {data.map((num) => {
            return (
              <View key={num} style={styles.tab}>
                <Text>Tab</Text>
              </View>
            );
          })}
        </ScrollView>
      </Animated.View>
      <Animated.FlatList
        style={{marginTop, paddingTop}}
        // contentContainerStyle={{paddingTop: 150}}
        refreshControl={
          <RefreshControl
            tintColor="#fff"
            onRefresh={() => {
              console.warn('Refreshing');
            }}
            refreshing={false}
          />
        }
        bounces={true}
        data={data}
        keyExtractor={(item) => item}
        scrollEventThrottle={16}
        renderItem={renderItem}
        onScroll={(e) => {
          if (e.nativeEvent.contentOffset.y > 0)
            scrollY.setValue(e.nativeEvent.contentOffset.y);
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  searchBar: {
    marginHorizontal: '5%',
    width: '90%',
    marginTop: 40,
    height: 40,
    borderRadius: 10,
    borderColor: 'lightgray',
    borderWidth: 1,
    backgroundColor: '#f4f4f4',
    justifyContent: 'center',
    alignItems: 'center',
  },
  tab: {
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 20,
    marginHorizontal: 20,
    width: 70,
    height: 30,
    borderRadius: 10,
    backgroundColor: 'pink',
  },
  card: {
    width: '90%',
    marginLeft: '5%',
    height: 100,
    borderRadius: 10,
    backgroundColor: 'yellow',
    marginBottom: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;