React-Native解决键盘遮挡问题：自定义原生模块获取键盘高度

"React-Native开发中，键盘弹出时可能会遮挡输入框，这个问题是开发者经常遇到的挑战。本文作者分享了解决这个问题的方法，包括使用React-native-keyboard-spacer库以及自定义原生模块来获取键盘高度。" 在React-Native应用中，当用户在TextInput组件中输入时，弹出的键盘有时会覆盖输入框，导致用户体验下降。React-Native的标准TextInput组件并未内置处理这种键盘遮挡问题的机制。为了解决这一问题，开发者通常需要借助第三方库或自定义解决方案。 一个常用的第三方库是React-native-keyboard-spacer，它可以自动在键盘出现时在底部添加一个空白区域，从而防止输入框被键盘遮挡。然而，仅仅使用这个库还不够，因为还需要知道键盘的具体高度，以便更精确地调整布局。 由于React-Native本身并不提供获取键盘高度的API，开发者需要编写原生模块来实现这一功能。对于iOS平台，可以通过监听UIKeyboardWillShowNotification和UIKeyboardWillHideNotification通知来获取键盘的显示和隐藏状态，以及其高度信息。以下是一个简单的iOS原生模块示例： ```objc // KeyboardHeight.h #import <UIKit/UIKit.h> #import "RCTEventEmitter.h" #import "RCTBridgeModule.h" @interface KeyboardHeight : RCTEventEmitter <RCTBridgeModule> -(void)heightChanged:(int)height; @property (nonatomic, assign) int kbHeight; @end // KeyboardHeight.m #import "KeyboardHeight.h" @implementation KeyboardHeight RCT_EXPORT_MODULE(); -(instancetype)init { self = [super init]; if (self) { self.kbHeight = 0; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardDidShow:) name:UIKeyboardWillShowNotification object:nil]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil]; } return self; } // 当键盘将要显示时 -(void)keyboardDidShow:(NSNotification *)note { NSDictionary *info = [note userInfo]; NSValue *kbFrame = [info objectForKey:UIKeyboardFrameEndUserInfoKey]; CGRect keyboardRect = [kbFrame CGRectValue]; self.kbHeight = keyboardRect.size.height; [self sendEventWithName:@"KeyboardHeightDidChange" body:@{@"height": @(self.kbHeight)}]; } // 当键盘将要隐藏时 -(void)keyboardWillHide:(NSNotification *)note { self.kbHeight = 0; [self sendEventWithName:@"KeyboardHeightDidChange" body:@{@"height": @(self.kbHeight)}]; } @end ``` 在这个例子中，`KeyboardHeight`类继承自`RCTEventEmitter`，并实现了`RCTBridgeModule`协议。它监听键盘显示和隐藏的通知，并更新键盘高度属性。当键盘高度改变时，通过`sendEventWithName:body:`方法向JavaScript端发送事件，传递键盘高度信息，以便React-Native端可以据此调整布局。 通过这样的方式，开发者可以在React-Native应用中动态获取键盘的高度，从而更好地适配键盘弹出时的情况，确保输入框始终可见。结合React-native-keyboard-spacer或其他布局调整策略，可以有效地解决键盘遮挡问题，提升用户在输入时的体验。