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