5

向下滚动时,我试图隐藏导航栏(NavigatorIOS)。我怎样才能做到这一点?

谢谢

4

2 回答 2

4

感谢@Vincent,我设法在本机反应中制作了与 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>
    );
  }
}
于 2017-03-12T22:23:43.697 回答
3

滚动时无法隐藏 NavigatorIOS 栏。基于此问题,导航器位于静态组件内,这意味着状态更改时不会重新渲染栏。因此,如果栏已被渲染,则无法隐藏它。您只能在渲染新路线之前将其隐藏。如果你真的想在滚动时隐藏导航栏,你可以尝试使用这个库来代替:react-native-navbar

如何使用 react-native-navbar 做到这一点:

  1. 使用 scrollView 隐藏组件的 NavigatorIOS 栏
  2. 在此组件内部,在 scrollView 上,使用自定义函数处理滚动,该函数将更新组件状态,这将重新呈现组件。
  3. 根据您的状态,隐藏或显示您的导航栏。
  4. 在您的自定义导航栏控件上,绑定您通常使用的 NavigatorIOS 弹出、推送、替换等操作。

您可以关注此问题以帮助您了解如何操作

您的组件将如下所示:

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>
    );
  }
}
于 2017-03-11T19:35:12.813 回答