Как достичь анимации приложения, где панель инструментов исчезает при прокрутке вниз и вкладках вверх?

Question

Я хочу добиться чего-то вроде анимации whatsapp, где панель инструментов скрыта во время прокрутки вниз и показывается назад, когда прокручивается вверх, когда панель вкладок всегда прилипает к вершине, пока я использовал Animated, чтобы установить высоту панели инструментов на 0 при прокрутке вниз и назад нормально, когда прокрутка вверх, но проблема заключается в том, что панель инструментов скрыта, высота прокрутки изменяется, чтобы покрыть область, а также запускает onscroll, поэтому я получаю ту странную анимацию, где панель инструментов продолжает показывать и скрывать несколько раз.

Что App Анимация

Это то, что я пытался до сих пор

Панель

<Animated.View style={{height: this.state._showHeaderTitle}}> 
    <ToolbarAndroid 
     titleColor={'#FFF'} 
     title={this.props.title} 
     navIcon={images.arrowBack} 
     onIconClicked={() => this._goBack()} 
     onActionSelected={() => {}} 
     actions={[{title: 'Search', icon: images.search, show: 'always'}]} 
     style={[{backgroundColor: '#528eff', width: this.windowWidth, height: 48}]}/> 
</Animated.View> 

ScrollView

<ScrollView scrollEventThrottle={16} 
    onScroll={(event) => this.detectScrollPosition(event)} 
    style={{height: this.windowHeight - this.state.headerTitleCurrentHeight, flexDirection: 'column'}}> 
     <View 
      style={[styles.highNormalLowDocListBody]}> 
       <ListView 
        dataSource={this.state.documents} 
        enableEmptySections={true} 
        renderRow={(rowData) => this._renderRow(rowData)} 
       /> 
     </View> 
</ScrollView> 

OnScroll

detectScrollPosition(event) { 
    var currentOffset = event.nativeEvent.contentOffset.y; 
    var direction = currentOffset > this.state.offset ? 'down' : 'up'; 

    this.setState({offset: currentOffset}); 

    console.log('Begin Scroll'); 

    if (direction === 'up') { 
     Animated.spring(this.state._showHeaderTitle, { 
      toValue: 48, 
      velocity: 6 
     }).start(); 
     this.setState({headerTitleCurrentHeight: 48}); 
    } else { 
     Animated.spring(this.state._showHeaderTitle, { 
      toValue: 0, 
      velocity: 6 
     }).start(); 
     this.setState({headerTitleCurrentHeight: 0}); 
    } 
}; 

Answer 1

Спасибо всем за ваш вклад в ваши комментарии привели меня искать CoordinatorLayout и в конце концов я нашел это GitHub Repo, который полностью сделал мой день это на китайском, хотя для тех, кто не знает китайцев, как я, перевод Google будет достаточным, чтобы вы собрались

Git Hub:https://github.com/maolion/mao-rn-android-kit

Answer 2

что новый андроид XML блок от проектирования и поддержки библиотеки.

<android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@color/white"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> 

       <android.support.v7.widget.Toolbar 
        android:id="@+id/tb_app_bar" 
        android:layout_width="match_parent" 
        android:layout_height="?attr/actionBarSize" 
        android:elevation="4dip" 
        app:layout_collapseMode="pin"> 

       </android.support.v7.widget.Toolbar> 

     </android.support.design.widget.CollapsingToolbarLayout> 
    </android.support.design.widget.AppBarLayout> 

для использования этого вам необходимо иметь CoordinatorLayout и NestedScrollView или recyclerview с поведением макета

приложение: layout_behavior = "@ строки/appbar_scrolling_view_behavior"

в CollapsingToolbarLayout задана как он должен вести себя. теперь он сбрасывается и снова появляется при прокрутке вниз.

Answer 3

Для этой цели вы можете использовать CoordinatorLayout и CollapsingToolbarLayout.

Ниже приведены некоторые ссылки, Вы можете обратиться:

https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html

http://antonioleiva.com/collapsing-toolbar-layout/