如何在向下滚动时隐藏搜索栏，以及如何在使用 react-native 向上滚动时显示它

Question

我有一个搜索栏，我只需要当它向下滚动时它会消失，当它向上滚动时它会出现的功能，但我不知道如何，如果有人可以向我展示一个具体的例子如何做该功能，我会很豪华，直到那时我展示我的代码:)

showSearchBarIOS = () => {
    return (
      <View style={styles.containerSearchBarIOS}>
        <Icon name="search" size={20} style={{ marginLeft: 5 }} />
        <TextInput
          style={styles.textInputIos}
          value={this.state.text}
          autoCorrect={false}
          returnKeyType="done"
          onChangeText={this.submitText}
          placeholder="Buscar..."
          placeholderTextColor={GRIS_DEFAULT}
        />
        <Text>{this.props.texto}</Text>
      </View>
    );
  };
  showSearchBarAndroid = () => {
    return (
      <View style={styles.containerSearchBarAndroid}>
        <Icon
          name="search"
          size={25}
          style={{ marginLeft: 5, marginBottom: 3 }}
        />
        <TextInput
          style={styles.textInputAndroid}
          value={this.state.text}
          autoCorrect={false}
          returnKeyType="done"
          onChangeText={text => this.setState({ text: text })}
          placeholder="Buscar Diputados..."
          placeholderTextColor={GRIS_DEFAULT}
        />
      </View>
    );
  };
showList = () => {
    return (
      <View style={{ flex: 1 }}>
        {Platform.OS === "ios"
          ? this.showSearchBarIOS()
          : this.showSearchBarAndroid()}
        <RecyclerListView
          layoutProvider={this._layoutProvider}
          dataProvider={this.props.dataProvider}
          rowRenderer={this._rowRenderer}
          scrollViewProps={{
            refreshControl: (
              <RefreshControl
                refreshing={this.props.diputadosNomina.isFetching}
                onRefresh={this.props.fetchDiputadosNomina}
                colors={[REFRESH_CONTROL_COLOR]}
                tintColor={REFRESH_CONTROL_COLOR}
              />
            )
          }}
        />
      </View>
    );
  };
container: {
    flex: 1,
    backgroundColor: PAGE_BACKGROUND_COLOR
  },
  containerSearchBarIOS: {
    flexDirection: "row",
    alignItems: "center",
    height: 30,
    padding: 0,
    marginLeft: 6,
    marginRight: 6,
    marginTop: 5,
    backgroundColor: BACKGROUND_SEARCH_BAR,
    borderWidth: 1,
    borderColor: GRIS_DEFAULT,
    borderRadius: 60
  },
  containerSearchBarAndroid: {
    flexDirection: "row",
    alignItems: "center",
    height: 40,
    padding: 0,
    marginLeft: 2,
    marginRight: 2,
    marginBottom: 5,
    marginTop: 5,
    backgroundColor: BACKGROUND_SEARCH_BAR,
    borderWidth: 1,
    borderColor: GRIS_DEFAULT,
    borderRadius: 60
  },
  textInputIos: {
    fontSize: 14,
    fontFamily: Roboto_Regular,
    width: "90%",
    padding: 2
  },

textInputAndroid： { 字体大小： 13， 字体族： Roboto_Regular， 宽度："90%" }

Answer 1

这是一个沙盒。基本上是这样的：

    const HideOnScroll = () => {
    const [scroll, setScroll] = React.useState(window.scrollY);
    const [visible, setVisible] = React.useState(false)
    React.useEffect(() => {
        const onScroll = () => {
            setVisible(window.scrollY > scroll)
            setScroll(window.scrollY)
        }
        window.addEventListener("scroll", onScroll);
        return () => window.removeEventListener("scroll", onScroll);
    });
    return (
        <div style={{ height: "200vh" }}>
            {visible && (
                <div style={{ position: "fixed" }}>Only show scrolling down</div>
            )}
        </div>
    );
}

Answer 2

请找到以下中型博客，它将帮助您创建搜索栏隐藏/显示等视图，向上/向下滚动：

https://blog.expo.io/implementation-complex-animation-in-react-native-by-example-search-bar-with-tab-view-and-collapsing-68bb43be2dcb

Answer 3

也许与此类似？

componentDidMount(){
    this.prev = window.scrollY;
    this.show = false;
    window.addEventListener('scroll', e => this.handleNavigation(e);
}
handleNavigation = (e) =>{
    const window = e.currentTarget;
    if(this.prev > window.scrollY){
        this.show = true;
    }
    else if(this.prev < window.scrollY){
        this.show = false;
    }
    this.prev = window.scrollY;
};
render () {
  return (
    <Fragment>
      { this.show && <SearchBar /> }
    <Fragment/>
  )
}