ReactNative при прокрутке автоматически скрывать навигаторы

Question

Я пытаюсь скрыть панель навигации (NavigatorIOS) при прокрутке вниз. Как я могу этого достичь?

Спасибо

Answer 1

Благодаря Vincent D'amour мне удалось сделать похожий, простой код для AMScrollingnavbar в реагировать родной.. (PS: у него есть сбой, но я доволен общим результатом)

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 невозможно при прокрутке. Основываясь на этой проблеме, навигатор находится внутри статического компонента, что означает, что панель не перерисовывается при изменении состояния. Так что, если панель была визуализирована, вы не можете ее скрыть. Вы можете скрыть это только перед рендерингом нового маршрута. Если вы действительно хотите скрыть панель навигатора при прокрутке, вы можете попробовать использовать эту библиотеку вместо этого: Reaction-native-navbar

Как это сделать с реакцией-native-navbar:

1. Скрыть панель NavigatorIOS для вашего компонента с scrollView
2. Внутри этого компонента в scrollView обработайте прокрутку с помощью пользовательской функции, которая будет обновлять состояние компонента, которое будет перерисовывать компонент.
3. Основываясь на своем состоянии, скрыть или показать панель навигации.
4. В пользовательском элементе управления панели навигации свяжите действия NavigatorIOS pop, push, replace и т. Д., Которые вы обычно используете.

Вы можете следить за этой проблемой, чтобы помочь вам, как это сделать

Ваш компонент будет выглядеть так:

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 высота отличается, вы можете использовать Platform.select() если вам нужно, чтобы он работал на Android. Вы также можете указать высоту 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>
    );
  }
}