键盘显示时 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>

已尝试使用 KeyboardAvoidingView 更改 SafeAreaView，但空白/间隙仍然存在。

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

我从 react navigation tabs 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.
  }
);