如何在 React Native Android 应用程序中为“windowSoftInputMode"使用“adjustPan"和“adjustResize" [英] How To Use both 'adjustPan' and 'adjustResize' for 'windowSoftInputMode' in React Native Android app

问题描述

如何在 AndroidManifest.xml 中同时使用adjustPan"和adjustResize"来响应本机应用程序.

How can I use both 'adjustPan' and 'adjustResize' in AndroidManifest.xml react native app.

我的导航是在 ReactNavigation 上使用 StackNavigator 和 TabNavigator 完成的.我有一个文本框，用户可以在其中键入任何数据.执行此操作时，选项卡栏显示在键盘顶部.为了阻止这种情况，我使用了adjustPan"并且效果很好.

My navigation is made upon ReactNavigation with StackNavigator and TabNavigator. I have a text box where the user can type any data. While performing this, the tab bar is displaying on the top of Keyboard. In order to block this i used 'adjustPan' and it worked fine.

在另一个屏幕上，我注册了多个文本框.在这里，我无法滚动整个屏幕，除非单击键盘上的勾号"或手动单击系统后退按钮.为了解决这个问题，我发现 'KeyboardAvoidingView' 工作正常.但要激活此功能，需要将windowSoftInputMode"更改为adjustResize".

On another screen, I have a registration with multiple text boxes. Here I cant scroll the entire screen unless and clicking 'tick' on the keyboard or manually click system back button. To solve this issue I found 'KeyboardAvoidingView' which is working fine. but to activate this need to change 'windowSoftInputMode' to 'adjustResize'.

在文档中，发现这两个属性完全不同，我不能同时使用.有人可以帮我吗?

In documentation, found that these two have entirely different property and I can't both together. could someone help me on this?

参考:https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

推荐答案

我找到了一个名为 react-native-android-keyboard-adjust，允许我们按需切换windowSoftInputMode，这个应该可以满足您的用例.但是，该库似乎没有得到积极维护，安装文档也有点过时，但在大多数情况下，您可以按照 README.md 给出的说明进行操作.

I found an npm package called react-native-android-keyboard-adjust, which allows us to switch the windowSoftInputMode on demand, this should be able to cater for your use case. However, the library seems to be not actively maintained and the installation documentation is a little bit out of date but for the most part, you can follow the instructions given by the README.md.

对于Update MainActivity.java in your project部分，最近版本的React Native应该可以自动链接依赖，不需要手动修改.

For the Update MainActivity.java in your project part, the recent versions of React Native should be able to auto-link the dependencies and there is no need to do this modification manually.

完成以上步骤后，您就可以尝试启动您的应用了.如果您遇到与 .dex 文件中的方法引用数量不能超过 64k 相关的错误，您可以将以下内容添加到您的 android/app/build.gradle> 文件

After the above steps, you can try to start your app. If you encountered an error related to something like The number of method references in a .dex file cannot exceed 64k, you can add the followings to your android/app/build.gradle file

android {
    ...

    defaultConfig {
        ...
        multiDexEnabled true
    }

    ...
}

安装包后，您可以根据需要调用库提供的方法来更改windowSoftInputMode.

After installing the package, you can call the methods provided by the library to change the windowSoftInputMode as you need.

例如，假设您有一个默认的 windowSoftInputMode 为 adjustResize，并且您想在 ScreenA 中使用 adjustPan，则可以调用 AndroidKeyboardAdjust.setAdjustPan() 当 ScreenA 挂载时，在卸载时调用 AndroidKeyboardAdjust.setAdjustResize() 将 windowSoftInputMode 重置为 adjustResize

For example, assuming you have a default windowSoftInputMode of adjustResize, and you want to use adjustPan within ScreenA, you can call AndroidKeyboardAdjust.setAdjustPan() when ScreenA mount, and reset the windowSoftInputMode to adjustResize on unmount by calling AndroidKeyboardAdjust.setAdjustResize()

这篇关于如何在 React Native Android 应用程序中为“windowSoftInputMode"使用“adjustPan"和“adjustResize"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！