滚动时反应本机自动隐藏导航 ios

Question

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

谢谢

Answer 1

滚动时无法隐藏 NavigatorIOS 栏。基于此 issue, the navigator is inside a static component which means the bar is not rerendered on state change.So if the bar has been rendered, you cannot hide it. You can only hide it before the render of a new route. If you really want to hide the navigator bar when scrolling, you can try using this library instead: react-native-navbar

如何使用 react-native-navbar：

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

您可以关注 this issue 来帮助您了解如何操作

您的组件将如下所示：

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 上高度不同，如果需要使其适用于 [=39]，可以使用 Platform.select() =].您还可以将高度指定为 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>
    );
  }
}

Answer 2

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

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

滚动时反应本机自动隐藏导航 ios

ReactNative when scrolling auto hide navigatorios

javascript

reactjs

react-native

navigator-ios