在 react-native 中隐藏和显示带有动画的 createBottomTabNavigator 选项卡栏
Posted
技术标签:
【中文标题】在 react-native 中隐藏和显示带有动画的 createBottomTabNavigator 选项卡栏【英文标题】:Hide and Show createBottomTabNavigator tabbar with Animation in react-native 【发布时间】:2019-02-08 09:10:45 【问题描述】:我使用createBottomTabNavigator
作为标签栏。
我可以通过设置true
或false
来使用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 选项卡栏的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 React-Transition-Group 显示和隐藏带有动画的模态/对话框?