打开键盘时反应原生底部标签栏向上推

Question

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

1. 我尝试过的解决方案之一是，在 android manifest 中，我更改了 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。但没有按预期工作。

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？如果您需要任何其他代码部分以供参考，请在下面发表评论。谢谢你的帮助。

Answer 1

我用的是 React navigation 5，这是你想要的吗？

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

要在此处阅读的文档。

Answer 2

请使用此功能

<Tab.Navigator
screenOptions={{
    tabBarHideOnKeyboard: true
 }}
/>

我相信它会完美地工作

Answer 3

找到它，只需将底部导航添加到视图中，以制作屏幕尺寸的视图，如下所示：

import React from 'react'
import { StyleSheet, Text, View, Dimensions } from 'react-native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const { width, height } = Dimensions.get("window")
const Tab = createBottomTabNavigator()

export default function () {
    return (
        <View style={{
            width,
            height,
        }}>
            <Tab.Navigator>
                <Tab.Screen
                    name="Screen1"
                    component={Component}
                />
                <Tab.Screen
                    name="Screen2"
                    component={Component}
                />
                <Tab.Screen
                    name="Screen3"
                    component={Component}
                />
            </Tab.Navigator>
        </View>
    )
}

Answer 4

只需转到AndroidManifest.xml文件并更改/添加内部activity标签：

android:windowSoftInputMode="adjustPan"