![](/img/trans.png)
[英]how to hide TabBar when keyboard is open in expo react-native
[英]Hide and Show createBottomTabNavigator tabbar with Animation in react-native
我正在使用createBottomTabNavigator
的標簽欄。
我可以通過將tabBarVisible
設置為true
或false
來隱藏和顯示tabbar。
我的問題是,我希望它與動畫一起隱藏。
任何鏈接都將有所幫助。
您可能想要使用新的Animated.Value(0)並更改選項卡的底部值。 https://github.com/react-navigation/react-navigation/issues/888這有一個解決方案。
您可以創建自定義tabBarComponent
,然后使用所需的動畫對其進行隱藏/顯示。 我趕上的道具tabbar
在componentWillReceiveProps
我將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>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.