打开键盘时反应本机底部标签栏将自身向上推 [英] React native bottom tab bar pushing itself up when opening keyboard

问题描述

我们正在使用createBottomTabNavigator。在选项卡之一中包含顶部的搜索栏。在该搜索栏上单击时，我们正在打开键盘。但是键盘也会向上推底部的标签栏。打开键盘时，我们需要底部的标签栏保持在底部。

We are using createBottomTabNavigator. In one of the tab contains search bar at the top. While clicking on that search bar, we are opening the keyboard. But the keyboard pushing up the bottom tab bar also. We need the bottom tab bar remains at the bottom when opening keyboard.

1. 我尝试过的解决方案之一是在android清单中已更改android：windowSoftInputMode = adjustPan或 adjustNothing。它工作正常。但是我们在另一个需要 adjustResize的选项卡中使用聊天布局。因此，我必须为windowSoftInputMode保留 adjustResize。


2. 作为另一个解决方案，我尝试在组件本身内部更改windowSoftInputMode。所以我已经尝试过- https://www.npmjs.com / package / react-native-android-keyboard-adjust 。但是没用。


3. 作为另一个，我试图创建一个TabBarComponent，如这里提到的 https://github.com/react-navigation/react-navigation/issues/618 。

1. One of the solution I have tried is, in android manifest, I have changed android:windowSoftInputMode="adjustPan" or "adjustNothing". It is working fine as expected. But we are using chat layout in another tab which needs "adjustResize". So I have to keep "adjustResize" for windowSoftInputMode.
2. As another solution, I tried to change windowSoftInputMode inside component itself. SO I have tried with this - https://www.npmjs.com/package/react-native-android-keyboard-adjust. But no use.
3. As another one, I tried to create a TabBarComponent like mentioned here https://github.com/react-navigation/react-navigation/issues/618. But not working as expected.

const SignedIn = createBottomTabNavigator(
  {
    Followers: {
      screen: FollowerStack,
      ...
    },
    Search: {
      screen: SearchStack,
    },
    Home: {
      screen: HomeStack,
    },
    Bookmarks: {
      screen: BookmarkStack,
    },
    Profile: {
      screen: ProfileStack,
    }
  },
  {
    initialRouteName: "Home",
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    tabBarOptions: {
      keyboardHidesTabBar: true,
      showIcon: true,
      showLabel: false,
      activeTintColor: "red",
      inactiveTintColor: "gray",
      adaptive: true,
      safeAreaInset: {
        bottom: "always"
      },
      style: {
        position: 'relative',
        backgroundColor: "#F9F8FB",
        height: TAB_NAVIGATOR_DYNAMIC_HEIGHT,
        paddingTop: DeviceInfo.hasNotch() ? "5%" : "0%",
        minHeight: TAB_NAVIGATOR_DYNAMIC_HEIGHT,
        width: '100%',
        bottom: 0
      }
    }
  }
);

1. 是否存在其他使底部标签栏变粘的属性底部？
   或


2. 是否可以从组件内部更改android清单windowSoftInputMode？
   如果您需要任何其他代码部分供参考，请在下面评论。谢谢您的帮助。

推荐答案

我使用了React导航5，这是您想要的吗？

I used React navigation 5, is this what you want?

<SignedIn.Navigator 
   tabBarOptions={{
      keyboardHidesTabBar: true
   }}         
}>
</SignedIn.Navigator>

文档此处阅读。

这篇关于打开键盘时反应本机底部标签栏将自身向上推的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！