createBottomTabNavigator - пробел (значок автоматически скрывается) при отображении клавиатуры

Question

React-native-приложение с версией:

react@16.9.0
react-native@0.61.2
react-navigation@^4.0.10
react-navigation-stack@^1.10.3
react-navigation-tabs@^2.5.6

Я пытаюсь создать приложение с помощью createBottomTabs, когда я пытаюсь ввести TextInput, когда отображается клавиатура, появляются нижние вкладки со значком,значок будет автоматически скрываться, оставляя пробел / пробел в верхней части клавиатуры

мой пример кода:

<SafeAreaView style={
   flex: 1,
   alignItems: 'center'
}>
   <View>
     <TextInput />
   </View>
</SafeAreaView>

уже пытался изменить SafeAreaView с помощью KeyboardAvoidingView, но пробел / пробелвсе еще там.

const MainTabs = createBottomTabNavigator({
  Screen1: {
    screen: Screen1Stack,
    navigationOptions: {
      tabBarIcon: Icon
    }
  },
  Screen2: {
    screen: Screen2Screen,
    navigationOptions: {
      tabBarIcon: Icon
    }
  },
  Screen3: {
    screen: Screen3Screen,
    navigationOptions: {
      tabBarIcon: Icon
    }
  },
  Screen4: {
    screen: Screen4Screen,
    navigationOptions: {
      tabBarIcon: Icon
    }
  },
},
  {
    tabBarOptions: {
      ...
      showLabel: false
    }
  }
)

Answer 1

я получаю ответ из комментария на github реагирующих навигационных вкладок (с заголовком «Панели нижних вкладок и клавиатура на Android # 16»), и я поделюсь им здесь, если у кого-то возникнет та же проблема, что и у меня, на которую ответил@ export-mike и детализировано @ hegelstad

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.

export default 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} />
      );
    }
  }
}

Использование:

const Tabs = createBottomTabNavigator({
  TabA: {
    screen: TabA,
    path: 'tab-a',
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: 'Tab A',
    })
  },
  TabB: {
    screen: TabB,
    path: 'tab-b',
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: 'Tab B',
    })
  }
},
(Platform.OS === 'android')
? {
    tabBarComponent: props => <TabBarComponent {...props} />,
    tabBarPosition: 'bottom'
   }
: {
    // don't change tabBarComponent here - it works on iOS after all.
  }
);