ReactNative滚动时自动隐藏导航器

Question

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

感谢

Answer 1

感谢@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> 
    ); 
    } 
} 

Answer 2

隐藏NavigatorIOS酒吧是不可能的，而滚动。基于这个issue，导航器在一个静态组件内，这意味着该条在状态改变时不会被重新展示。所以如果条已经被渲染，你就不能隐藏它。您只能在呈现新路线之前隐藏它。如果你真的想隐藏滚动时的导航栏，您可以尝试使用这个库，而不是：react-native-navbar

如何使用做反应，本机导航栏：

1. 隐藏与NavigatorIOS酒吧为您的组件scrollView
2. 在此组件中，在scrollView上，使用自定义函数处理滚动，该自定义函数将更新组件状态，这将重新渲染组件。
3. 根据你的状态，隐藏或显示导航栏。
4. 在您的自定义导航栏控件上，绑定您通常使用的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> 
    ); 
    } 
}