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

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

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

3 个答案: