隐藏并显示创建底部选项卡导航器选项卡栏，动画在反应本机

Question

我正在使用createBottomTabNavigator作为标签栏。

我可以通过将其设置为true或false来使用它tabBarVisible道具隐藏和显示选项卡栏。

我遇到的问题是，我希望它用动画隐藏。

任何链接都会有所帮助。

Answer 1

您可能希望使用新的 Animated.Value(0(并更改选项卡的底部值。https://github.com/react-navigation/react-navigation/issues/888 这有一个解决方案。

Answer 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>
    );
  }