Question

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

我尝试过的解决方案之一是，在android清单中，我更改了android：windowSoftInputMode =“ adjustPan”或“ adjustNothing”。它工作正常。但是我们在另一个需要“ adjustResize”的选项卡中使用聊天布局。因此，我必须为windowSoftInputMode保留“ adjustResize”。
作为另一个解决方案，我尝试在组件本身内部更改windowSoftInputMode。所以我已经尝试过-https://www.npmjs.com/package/react-native-android-keyboard-adjust。但是没用。
作为另一个，我尝试创建一个https://github.com/react-navigation/react-navigation/issues/618所示的TabBarComponent。但是没有按预期工作。

<html>

<body>


  <div class="row">
    <div class="column">
      <a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
    </div>
    <div class="column">
      <a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
    </div>
    <div class="column">
      <a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
    </div>
    <div class="right-top-col column">
      <a class="js-leaderboard" href="#"><img src="https://i.imgur.com/C5vLv9p.png" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
      <a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
    </div>
  </div>
  </div>

</body>

</html>

是否存在其他使底部标签栏粘在底部的属性？或
是否可以从组件内部更改android清单windowSoftInputMode？如果您需要任何其他代码部分以供参考，请在下面发表评论。感谢您的帮助。

Answer 1

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

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

要在这里阅读的document。

Answer 2

只需转到regex = '((^$?(?:(?:0(?:0|11)$?[\s-]?$?|\+)44$?[\s-]?$?(?:0$?[\s-]?$?)?|0)(?:\d{2}$?[\s-]?\d{4}[\s-]?\d{4}|\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4}|\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3})|\d{5}\)?[\s-]?\d{4,5}|8(?:00[\s-]?11[\s-]?11|45[\s-]?46[\s-]?4\d))(?:(?:[\s-]?(?:x|ext\.?\s?|\#)\d+)?)$)|($?[2-9][0-8][0-9]$?[-. ]?[0-9]{3}[-. ]?[0-9]{4}))' m = re.match(regex, input) if m: print("True") else: print("False")文件并在AndroidManifest.xml标签内更改/添加：

activity

Answer 3

我已经解决了这个问题。以前，我在配置“ react-native-android-keyboard-adjust”时犯了一个小错误。现在工作正常。因此，我们可以使用此库-https://www.npmjs.com/package/react-native-android-keyboard-adjust

为特定组件更改'windowSoftInputMode'

Answer 4

我遇到了完全相同的问题。以下是我成功解决它的两种方法。

将 "softwareKeyboardLayoutMode":"pan" 添加到 app.json 中，如下所示

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

通过这样做，底部导航器隐藏在键盘后面。然而，包含 ScrollView 的 TextInputs 并没有按照我想要的方式工作。整个应用屏幕都随着键盘的高度而变化，隐藏了我的 ScrollView 的一半及其上方的所有内容（标题和其他内容）。

我使用的第二种解决方法是使用 useKeyboard hook。第 1 步：删除 "softwareKeyboardLayoutMode" 使其默认为 height （这会导致 CustomBottomTabNav 上升到键盘上方，因为整个屏幕被挤压在剩余的高度）步骤 2：在键盘处于活动状态时动态重置 CustomBottomTabNav 的位置。

在包含 TextInputs 的屏幕

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

在CustomBottomTabNav

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

第二种方法更可靠。我尝试了 keyboardAvoidingView，但无法理解其不可预测的行为。

当打开键盘时，反应本机底部标签栏将自身向上推

4 个答案: