ReactNative 调用软键盘时将底部导航栏或者底部position样式顶飞

前端小嘟

于 2021-08-18 10:31:22 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React Native 文章标签： react native

本文链接：https://blog.youkuaiyun.com/qq_45641978/article/details/119774548

React Native 专栏收录该内容

1 篇文章

订阅专栏

在开发Android应用时，遇到一个常见的问题：当文本输入框获取焦点并弹出软键盘时，底部的导航栏被顶起，影响了界面的美观。这个问题通常是由于tabbar没有正确处理窗口的输入模式导致的。解决方案在于修改`AndroidManifest.xml`文件中`<activity>`标签的`android:windowSoftInputMode`属性，将其从`adjustResize`更改为`stateAlwaysHidden|adjustPan`。这样设置后，软键盘的出现不会改变布局大小，而是会平移界面以适应键盘的显示，从而避免了导航栏被挤压的状况。完成修改并重启应用后，问题得到解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发文本输入框时遇到这样一个问题

输入框获取焦点调用软键盘时底部的导航栏被顶了起来样式极其丑陋。

个人感觉应该时tabbar脱离了文档流在使用其他的app开发工具时也经常遇到

解决办法

根据路径
android/app/src/main/AndroidManifest.xml，修改android:windowSoftInputMode的属性值

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.awesomeproject">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
//原内容        
android:windowSoftInputMode="adjustResize"
//修改后        android:windowSoftInputMode="stateAlwaysHidden|adjustPan">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
    </application>
</manifest>