React Native:尝试在滚动时隐藏搜索栏 [英] React native : trying to hide search bar on scroll

问题描述

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

i am currently trying to hide my search bar when scrolling.

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

The components i have on screen are a search bar at the top followed by a horizontal scroll view with tabs, then my flatlist.

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

with the current implementation, when i load the screen, the search bar is covering the tabs and when i scroll down the search bar hides and the tabs appear.

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

What i am trying to do is, when i load the screen the search bar, tabs and flatlist should all be visible then when i start scrolling the search bar hides and the tabs and flatlist fill the available space at the top.

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

Also, another problem i am encountering is when i keep scrolling up the search bar keeps moving up until it disappears.

这是我的代码:

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)
      }}
    />
)

位置:绝对"，搜索栏位于选项卡的顶部，而不是位置:绝对"我尝试了相对"，当我向下滚动搜索栏时，搜索栏会隐藏，但选项卡上方有空白区域.

with position:"absolute", the search bar is on top on the tabs so instead of position:"absolute" i tried "relative", when i scroll down the search bar hides but there is blank space above the tabs.

我也在使用 react native 元素搜索栏组件.

I am also using the react native elements search bar component.

希望得到任何可能的帮助，提前致谢.

would appreciate any help possible, thank you in advance.

更新

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

After following J.Doe solution, which is the correct solution to solving the translation problem, i now faced a new problem correlating to this.

由于我可以在滚动视图中的不同选项卡之间切换，因此每个选项卡都有其对应的 Flatlist 数据.如果 FlatList 有 3 个以上的数据项，则功能正常工作，但如果有 1 或 2 个数据项，则翻译功能停止工作.

Since i can toggle between the different tabs in my scrollView, each tab has its corresponding Flatlist data. If the FlatList has more than 3 data items the functionality works correct, but if it has 1 or 2 data items then the translation functionality stops working.

如果我在选项卡 1(有许多数据项)并向下滚动(即搜索栏被翻译)然后点击仅包含 1 个数据项的选项卡 2，我无法滚动屏幕来查看搜索吧.

if i am on tab 1 (with many data items) and scroll down (ie. search bar is translated) then tap on tab 2 that only contains 1 data item, i am not able to scroll the screen to see the search bar.

这是我的代码:

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> 

推荐答案

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;

这篇关于React Native:尝试在滚动时隐藏搜索栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！