javascript - 滚动自动隐藏导航器时的 ReactNative

Question

向下滚动时，我试图隐藏导航栏（NavigatorIOS）。我怎样才能做到这一点？

谢谢

Answer 1

感谢@Vincent，我设法在本机反应中制作了与 AMScrollingnavbar 类似的简单代码 ..（PS：它有一个小故障，但我对整体结果感到满意）

import React, { Component } from 'react';
import { Text, View, ScrollView, Animated } from 'react-native';
import NavigationBar from 'react-native-navbar';

const AnimatedNavigationBar = Animated.createAnimatedComponent(NavigationBar);

export default class BasicListView extends Component {

  state = { isNavBarHidden: false, height: new Animated.Value(64) };

  setAnimation(disable) {
    Animated.timing(this.state.height, {
      duration: 100,
      toValue: disable ? 0 : 64
    }).start()
  };

   handleScroll(event) {
      this.setAnimation((event.nativeEvent.contentOffset.y > 64));
      this.setState({ isNavBarHidden: !this.state.isNavBarHidden });
  }

  render() {
    return (
      <View style={{ flex: 1 }} >
        <AnimatedNavigationBar style={{ backgroundColor: 'red', height: this.state.height }} />
        <ScrollView scrollEventThrottle={16} onScroll={this.handleScroll.bind(this)}>
          <View style={{ height: 200 }}><Text>Test</Text></View>
          <View style={{ height: 200 }}><Text>Test</Text></View>
          <View style={{ height: 200 }}><Text>Test</Text></View>
          <View style={{ height: 200 }}><Text>Test</Text></View>
          <View style={{ height: 200 }}><Text>Test</Text></View>
        </ScrollView>
      </View>
    );
  }
}

Answer 2

滚动时无法隐藏 NavigatorIOS 栏。基于此问题，导航器位于静态组件内，这意味着状态更改时不会重新渲染栏。因此，如果栏已被渲染，则无法隐藏它。您只能在渲染新路线之前将其隐藏。如果你真的想在滚动时隐藏导航栏，你可以尝试使用这个库来代替：react-native-navbar

如何使用 react-native-navbar 做到这一点：

1. 使用 scrollView 隐藏组件的 NavigatorIOS 栏
2. 在此组件内部，在 scrollView 上，使用自定义函数处理滚动，该函数将更新组件状态，这将重新呈现组件。
3. 根据您的状态，隐藏或显示您的导航栏。
4. 在您的自定义导航栏控件上，绑定您通常使用的 NavigatorIOS 弹出、推送、替换等操作。

您可以关注此问题以帮助您了解如何操作

您的组件将如下所示：

class CustomComponent extends Component {
  state = { isNavBarHidden: false };

  handleScroll = () => this.setState({ isNavBarHidden: true });

  render() {
    const navbarStyle = this.state.isNavBarHidden ? { height: 0 } : {};

    return (
      <View>
        <NavigationBar style={navbarStyle} />
        <ScrollView onScroll={this.handleScroll}>
          ...
        </ScrollView>
      </View>
    );
  }
}  

编辑：这是带有动画高度的完整导航栏示例。您可以使用该Animated.createAnimatedComponent功能为您想要的所有内容设置动画。如果您想正确地为按钮的标题设置动画，则必须使用它。我使用 64 作为高度，因为它是 iOS 导航栏的高度，但在 android 上高度不同，Platform.select()如果需要使其适用于 android，可以使用。您还可以将高度指定为 5 而不是 0，以始终使导航栏的一部分可见且可按下。在此示例中，导航栏将在每次滚动时隐藏或显示，您可能必须根据您想要实现的目标隐藏和显示它。

import React, { Component } from 'react';
import { Text, View, ScrollView, Animated } from 'react-native';
import NavigationBar from 'react-native-navbar';

const AnimatedNavigationBar = Animated.createAnimatedComponent(NavigationBar);

export default class BasicListView extends Component {
  state = { isNavBarHidden: false, height: new Animated.Value(64) };

  setAnimation = enable => {
    Animated.timing(this.state.height, {
      duration: 400,
      toValue: enable? 64 : 0
    }).start()
  };

  handleScroll = () => {
    this.setAnimation(this.state.isNavBarHidden);
    this.setState({ isNavBarHidden: !this.state.isNavBarHidden });
  };

  render() {
    return (
      <View style={{ flex: 1 }} >
        <AnimatedNavigationBar style={{ backgroundColor: 'red', height: this.state.height }} />
        <ScrollView onScroll={this.handleScroll}>
          <View style={{ height: 200 }}><Text>Test</Text></View>
          <View style={{ height: 200 }}><Text>Test</Text></View>
          <View style={{ height: 200 }}><Text>Test</Text></View>
          <View style={{ height: 200 }}><Text>Test</Text></View>
          <View style={{ height: 200 }}><Text>Test</Text></View>
        </ScrollView>
      </View>
    );
  }
}