时间戳

首页 > 解决方案 > 我正在尝试以 react-native 修复屏幕底部的标签栏，在输入一些文本时

react-native - 我正在尝试以 react-native 修复屏幕底部的标签栏，在输入一些文本时

问题描述

我试图在 react-native 中修复屏幕底部的标签栏，当我输入一些文本或写东西时，标签栏出现在键盘的顶部，它不再固定在底部。我也试过绝对位置，

在这里，我附上了我给 tabNavigator 的代码

<Tab.Navigator
    screenOptions={{
      headerShown: false,
      tabBarActiveTintColor: '#000',
      tabBarInactiveTintColor: '#fff',
      tabBarShowLabel: true,
      tabBarStyle: {
        backgroundColor: '#327B5B',
        position: 'absolute',
        bottom: 0,
        left: 0,
        elevation: 0,
        // flex: 1,
        height: 70,
        paddingBottom: 10,
      },
    }}>

标签： react-nativereact-native-tabnavigatorreact-native-tab-view

解决方案

尝试向道具添加keyboardHidesTabBar选项。tabBarOptions这将告诉键盘在键盘处于活动状态时隐藏该 tabBar。这是它的样子：

<Tab.Navigator
tabBarOptions={{
  keyboardHidesTabBar: true
}}
screenOptions={{
  headerShown: false,
  tabBarActiveTintColor: '#000',
  tabBarInactiveTintColor: '#fff',
  tabBarShowLabel: true,
  tabBarStyle: {
    backgroundColor: '#327B5B',
    position: 'absolute',
    bottom: 0,
    left: 0,
    elevation: 0,
    // flex: 1,
    height: 70,
    paddingBottom: 10,
  }
}}>

之前已经回答过这个问题，但是我更新了您提交的代码，以便为您提供一些指导，以防您遇到问题！

编辑：我的错误，tabBarOptions 需要在 screenOptions 之外。

推荐阅读