reactjs – 滚动自动隐藏navigatorios时的ReactNative

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

如何使用react-native-navbar：

>使用scrollView隐藏组件的NavigatorIOS栏
>在此组件内部,在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上高度不同,你可以使用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>
    );
  }
}