kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-02-10 17:23:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix issue #618 - TabBarBottom should hide itself when Keyboard is activated (#1764)

Browse Source 
* Fix issue #618 - TabBarBottom should hide when Keyboard is activated

* fix undefined check for _keyboardDidHideSub

* fix prettier

* Update TabBarBottom.js

* Update TabBarBottom.js

* Update TabBarBottom.js

* Update TabBarBottom.js

* Update TabBarBottom.js
This commit is contained in:
Martin Malfertheiner
2017-11-05 07:44:03 +08:00
parent 3646c39997
commit faddb97ec9
1 changed files with 43 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/react-navigation/src/views/TabView/TabBarBottom.js vendored
View File

@@ -7,6 +7,7 @@ import {
StyleSheet,
View,
Platform,
Keyboard,
} from 'react-native';
import TabBarIcon from './TabBarIcon';
import SafeAreaView from '../SafeAreaView';
@@ -46,11 +47,15 @@ type Props = {
isLandscape: boolean,
};
type State = {
isVisible: boolean,
};
const majorVersion = parseInt(Platform.Version, 10);
const isIos = Platform.OS === 'ios';
const useHorizontalTabs = majorVersion >= 11 && isIos;
class TabBarBottom extends React.PureComponent<Props> {
class TabBarBottom extends React.PureComponent<Props, State> {
// See https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/UIKitUICatalog/UITabBar.html
static defaultProps = {
activeTintColor: '#3478f6', // Default active tint color in iOS 10
@@ -64,6 +69,41 @@ class TabBarBottom extends React.PureComponent<Props> {
props: Props;
state: State = {
isVisible: true,
};
_keyboardDidShowSub = undefined;
_keyboardDidHideSub = undefined;
componentWillMount() {
this._keyboardDidShowSub = Keyboard.addListener(
'keyboardDidShow',
this._keyboardDidShow
);
this._keyboardDidHideSub = Keyboard.addListener(
'keyboardDidHide',
this._keyboardDidHide
);
}
componentWillUnmount() {
this._keyboardDidShowSub !== undefined && this._keyboardDidShowSub.remove();
this._keyboardDidHideSub !== undefined && this._keyboardDidHideSub.remove();
}
_keyboardDidShow = () => {
this.setState({
isVisible: false,
});
};
_keyboardDidHide = () => {
this.setState({
isVisible: true,
});
};
_renderLabel = (scene: TabScene) => {
const {
position,
@@ -178,7 +218,7 @@ class TabBarBottom extends React.PureComponent<Props> {
style,
];
return (
return this.state.isVisible ? (
<Animated.View>
<SafeAreaView
style={tabBarStyle}
@@ -228,7 +268,7 @@ class TabBarBottom extends React.PureComponent<Props> {
})}
</SafeAreaView>
</Animated.View>
);
) : null;
}
}