在 react-native 中隐藏和显示带有动画的 createBottomTabNavigator 选项卡栏

Posted

技术标签:

【中文标题】在 react-native 中隐藏和显示带有动画的 createBottomTabNavigator 选项卡栏【英文标题】:Hide and Show createBottomTabNavigator tabbar with Animation in react-native 【发布时间】:2019-02-08 09:10:45 【问题描述】:

我使用createBottomTabNavigator 作为标签栏。

我可以通过设置truefalse 来使用tabBarVisible 属性隐藏和显示标签栏。

我的问题是,我想用动画隐藏它。

任何链接都会有所帮助。

【问题讨论】:

【参考方案1】:

您可能想使用 new Animated.Value(0) 并更改选项卡的底部值。 https://github.com/react-navigation/react-navigation/issues/888这个有解决办法。

【讨论】:

【参考方案2】:

您可以创建自定义tabBarComponent,然后使用您想要的动画隐藏/显示它。我在componentWillReceiveProps中抓到tabbar的道具

我使用react-native-animatable 制作动画。

  componentWillReceiveProps(props) 
    const oldState = this.props.navigation.state;
    const oldRoute = oldState.routes[oldState.index].routes[0];
    const oldParams = oldRoute.params;
    const wasVisible = !oldParams || oldParams.visible;

    const newState = props.navigation.state;
    const newRoute = newState.routes[newState.index].routes[0];
    const newParams = newRoute.params;
    const isVisible = !newParams || newParams.visible;

    if (wasVisible && !isVisible) 
      this.view.slideOutDown(500);
      this.setState(
        hidden: true,
      );
     else if (isVisible && !wasVisible) 
     this.view.slideInUp(500).then(() => 
      this.setState(
        hidden: false,
      );
    );
     
  

  render() 
    return (
      <Animatable.View
        ref=ref =>  this.view = ref; 
        style=[styles.container, 
          position: this.state.hidden ? 'absolute' : 'relative',
        ]
        useNativeDriver
      >
        <BottomTabBar
          ...this.props
        />
      </Animatable.View>
    );
  

【讨论】:

以上是关于在 react-native 中隐藏和显示带有动画的 createBottomTabNavigator 选项卡栏的主要内容,如果未能解决你的问题,请参考以下文章

如何在 iPhone 中隐藏/显示带有动画的 UIView

如何在react-native中显示动画svg?

隐藏/显示带有比例动画的工厂

如何使用 React-Transition-Group 显示和隐藏带有动画的模态/对话框?

动画完成后 React-Native ActivityIndi​​cator 不隐藏

使用带有样式组件的动画(react-native)