How to fixed Tabbar

하단 TabBar를 고정하려면 어떻게 해야할까?

Searchbar나 InputBox 에 글을 입력하려 할 때 키보드 자판이 생기면서 아래 탭바가 딸려 올라오는 경우가 있다.

필자의 경우 createBottomTabNavigator를 사용중…

/screens/HomeTab.js

const  tabBarIcon  = (nameInactive, nameActive) => ({ tintColor, focused}) =>(
 <Icon  name={focused ? nameActive : nameInactive}  size={24}  color={focused ? tintColor : null}  />
);

export  default  createBottomTabNavigator(
 {
  Home: {
   screen:  Home,
   navigationOptions: ({
   tabBarIcon:  tabBarIcon("home", "home")
  })},
  Explore: {
   screen:  Explore,
   navigationOptions: ({
   tabBarIcon:  tabBarIcon("search", "search")
  })},
  Map: {
   screen:  Map,
   navigationOptions: ({
   tabBarIcon:  tabBarIcon("map-marker", "map-marker")
  })},

  Inbox: {
    screen:  Inbox,
    navigationOptions: ({
    tabBarIcon:  tabBarIcon("envelope", "envelope")
  })},

  Profile: {
    screen:  Profile,
    navigationOptions: ({
    tabBarIcon:  tabBarIcon("user-circle", "user-circle")
  })},
 },
 {
  initialRouteName:  'Home',
  tabBarPosition:  'bottom',
  tabBarOptions: {
   activeTintColor:  '#CD1039',
  },
 }
);

온갖 삽질끝에…
TabNavigatorConfig 중 tabBarComponent 를 만들어 해결!

/components/TabBarComponents.js

import  React  from  'react';
import { Platform, Keyboard } from  'react-native';
import { BottomTabBar } from  'react-navigation-tabs'; // need version 2.0 react-navigation of course... it comes preinstalled as a dependency of react-navigation.

class  TabBarComponent  extends  React.Component {
 state  = {
  visible:  true
 }

 componentDidMount() {
  if (Platform.OS  ===  'android') {
   this.keyboardEventListeners  = [
    Keyboard.addListener('keyboardDidShow', this.visible(false)),
    Keyboard.addListener('keyboardDidHide', this.visible(true))
   ];
  }
 }

 componentWillUnmount() {
  this.keyboardEventListeners  &&  this.keyboardEventListeners.forEach((eventListener) =>  eventListener.remove());
 }

 visible  =  visible  => () =>  this.setState({ visible });

 render() {
  if (!this.state.visible) {
   return  null;
  } else {
   return (
    <BottomTabBar  {...this.props}  />
   );
  }
 }
}
export  default  TabBarComponent

HomeTab은 다음과 같이 변경

/screens/HomeTab.js

 ...
 {
  initialRouteName:  'Home',
  tabBarOptions: {
   activeTintColor:  '#CD1039',
  },
  tabBarComponent:  TabBarComponent
 }

Fixed TabBar 완성!!!

참고: https://github.com/react-navigation/react-navigation-tabs/issues/16

Written with StackEdit.