javascript - 如何使用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
  },

文本输入Android:{ 字体大小:13， 字体系列:Roboto_Regular， 宽度:“90%” }

Answer 1

这是一个sandbox 。基本上就是这样:

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