React Native 处理 iOS 键盘遮挡问题

1,726 阅读1分钟

使用 React Native 开发App,在不做处理的情况下,iOS 可能会存在键盘遮挡输入框的问题:

这个问题有很多处理方法,例如官方就提供了KeyboardAvoidingView组件。但这个组件并不好用,有时候甚至没有效果。

解决方案

其实在 iOS 平台,还有个非常简单的方法,就是使用IQKeyboardManager库,这是 iOS 平台的一个 Native 库。手动操作如下:

  1. 下载 IQKeyboardManager,下载地址

  2. 将解压后的 IQKeyboardManager 文件夹添加到 iOS 工程。

  3. 添加后会在左侧的导航栏看到已添加的 IQKeyboardManager 文件夹。

  4. 最后重新运行项目即可。

以上是 IQKeyboardManager 手动集成方式,使用 Pods 自动集成会更简单。

处理后的效果

相关问题

  1. 键盘顶部多了个工具栏

    解决: 在didFinishLaunchingWithOptions方法里面添加下面代码:

    // Objective-C
    [IQKeyboardManager sharedManager].enableAutoToolbar = NO;
    
    // Swift
    IQKeyboardManager.shared().isEnableAutoToolbar = false