Javascript 当打开键盘时，底部选项卡栏会自动向上推

我们正在使用CreateBoottomTabNavigator。在其中一个选项卡的顶部包含搜索栏。在点击搜索栏的同时，我们打开了键盘。但键盘也会向上推底部的选项卡栏。我们需要在打开键盘时，底部选项卡栏保持在底部

我尝试过的解决方案之一是，在android清单中，我更改了android:WindowsOfInputMode=“adjustPan”或“adjustNothing”。它工作得和预期的一样好。但我们在另一个需要“调整大小”的选项卡中使用聊天版式。所以我必须为WindowsOfInputMode保留“adjustResize”

作为另一个解决方案，我尝试在组件本身内部更改WindowsOfInputMode。所以我试过这个-。但是没有用

作为另一个例子，我尝试创建一个TabBarComponent，如本文所述。但是没有如预期的那样工作

是否有其他属性用于使底部选项卡栏在底部保持粘性？ 或

是否可以从内部组件更改android manifest WindowsOfInputMode？ 如果您需要任何其他代码部分作为参考，请在下面进行注释。谢谢你的帮助

---

只需转到

AndroidManifest.xml

文件并在

activity

内更改/添加标记：

android:windowSoftInputMode="adjustPan"

---

我找到了这个问题的解决办法。之前，我在配置“react native android键盘调整”时犯了一个小错误。现在它运行良好。因此，我们可以使用此库更改特定组件的“WindowsofInputMode”-

我使用了React navigation 5，这是您想要的吗

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

---

我想在这里读一读。

我也有同样的问题。以下是我成功解决问题的两种方法

添加

“softwareKeyboardLayoutMode”：“pan”

到app.json，如下所示

这样，底部导航器就隐藏在键盘后面。但是，包含

TextInputs

的

ScrollView

没有按我希望的方式工作。整个应用程序屏幕被键盘的高度所转换，隐藏了我的

ScrollView

的一半以及上面的所有内容（标题和内容）

我使用的第二个变通方法是使用。 步骤1：删除

“softwareKeyboardLayoutMode”

，使其默认为

高度
（这会导致
CustomBottomTabNav
在整个屏幕压缩到剩余高度时上升到键盘上方）
步骤2：当键盘处于活动状态时，动态重置
CustomBottomTabNav
的位置

在包含

文本输入的屏幕中

<ScrollView style={{ height: keyboard.keyboardShown? 510 - keyboard.keyboardHeight: 510}}>
/* lots of text inputs*/
</ScrollView>

---

第二种方法的工作更加可靠。我尝试了

keyboardavoidgview

，但无法控制其不可预测的行为。

您希望底部选项卡栏保持可见，但位于键盘下方，还是希望键盘滑动到选项卡栏顶部并隐藏它（即模式视图）？谢谢您的回复。任何解决方案都是可以接受的。是的，我可以说，当键盘打开时，我需要隐藏底部选项卡栏。来自“反应导航材质底部选项卡”的createMaterialBottomTabNavigator非常有效。欲了解更多信息：我们已尝试。它工作得很好。但我们必须使用“调整大小”，因为我们在另一个选项卡中使用聊天版面。如果我在聊天版式页面中使用“adjustPan”，则整个视图甚至与标题一起向上推。因此，我们必须使用“调整大小”。还有其他解决办法吗？如果我们可以私下与您联系，请在任何社交媒体上提供您的联系方式。在您的情况下，android:WindowsOfInputMode=“adjustPan | adjustResize”如何？在这种情况下，它仅采用“adjustPan”的行为。只有“adjustPan”和“adjustPan | adjustResize”都只提供“adjustPan”行为。它与默认的

选项卡栏

一起工作，但当我提供自己的

选项卡栏

时（即，这样做：

选项卡栏={（道具）=>

），它不起作用。有什么解决方案吗？@AminDannak你能提供更多关于你自己的自定义选项卡栏的详细信息吗？@Pok类似这样的东西：@AminDannak你能分享你的源代码片段吗？我不能只知道你的几行代码就调试你的代码。我知道这个问题提出已经一年多了，但我很抱歉为有类似问题的未来开发人员解答

"android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "softwareKeyboardLayoutMode":"pan"
    }

<ScrollView style={{ height: keyboard.keyboardShown? 510 - keyboard.keyboardHeight: 510}}>
/* lots of text inputs*/
</ScrollView>

tabBarOptions={{
    ...otherStuff,
    style={{ bottom: keyboard.keyboardShown? -100: -10, ...otherStuff}}
}}