Question

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

由于

Answer 1

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

如何使用react-native-navbar：

使用scrollView
在此组件内部，在scrollView上，使用自定义函数处理滚动，该函数将更新组件状态，这将重新呈现组件。
根据您的状态，隐藏或显示导航栏。
在自定义导航栏控件上，绑定您通常使用的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上高度不同，如果你需要使它适用于android，你可以使用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我设法在反应原生中为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>
    );
  }
}

滚动自动隐藏navigatorios时的ReactNative

2 个答案: