We often encounter places that require input during development. Although TextInput mentioned by RN is easy to use, it unfortunately does not deal with the occlusion problem.

Many times when the keyboard pops up, it blocks the editing box, which is a headache.

I originally wanted to look for third-party plug-ins in the js.coach library, and the best one I saw was React-native-keyboard-spacer. However, we still have one thing missing, which is to get the keyboard. high.

I also checked this for a long time and it was not provided. I couldn’t find it. So I had to write my own native module to get the height of the keyboard.

I won’t say much about getting the keyboard height in native iOS. There are a lot of them on the Internet. I directly paste my code. The native module I wrote based on RN:

// 
// KeyboardHeight.h 
// Jicheng6 
// 
// Created by guojicheng on 16/11/7. 
// Copyright ? 2016年 Facebook. All rights reserved. 
// 
 
#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 
// Jicheng6 
// 
// Created by guojicheng on 16/11/7. 
// Copyright ? 2016年 Facebook. All rights reserved. 
// 
 
#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:UIKeyboardDidShowNotification 
                        object:nil]; 
 } 
 return self; 
} 
 
-(void)keyboardDidShow:(NSNotification*) aNotification 
{ 
 //獲取鍵盤的高度 
 NSDictionary *userInfo = [aNotification userInfo]; 
 NSValue *aValue = [userInfo objectForKey:UIKeyboardFrameEndUserInfoKey]; 
 CGRect keyboardRect = [aValue CGRectValue]; 
 if (_kbHeight != keyboardRect.size.height){ 
  _kbHeight = keyboardRect.size.height; 
  [self heightChanged:_kbHeight]; 
 } 
} 
 
RCT_REMAP_METHOD(getKBHeight, 
         resolver:(RCTPromiseResolveBlock)resolve 
         rejecter:(RCTPromiseRejectBlock)reject) 
{ 
 resolve([[NSNumber alloc]initWithInt:_kbHeight]); 
} 
 
- (NSArray<NSString *> *)supportedEvents 
{ 
 return @[@"heightChanged"]; 
} 
 
-(void)heightChanged:(int)height 
{ 
 [self sendEventWithName:@"heightChanged" body:[NSNumber numberWithUnsignedInt:height]]; 
} 
 
@end

Actually here I The previous blog also said that at first I wanted to get the height through RCT_REMAP_METHOD. Unfortunately, when the keyboard popped up for the first time, it was not the height after popping up. After getting it, it was still 0, so I added a listening function heightChanged. When the recorded value and the changed value are inconsistent, the listening function is called and the value is passed to the JS side. In this way, the JS side can make corresponding changes after detecting the changes.

Okay, the native module is encapsulated, let’s look at js next. This is also an old topic. The previous blogs have mentioned it, so just post the code directly:

import React, { Component } from 'react'; 
import { 
  AppRegistry, 
  StyleSheet, 
  Text, 
  View, 
  TouchableOpacity, 
  Alert, 
  TextInput, 
  PixelRatio, 
  Linking, 
  Keyboard, 
  NativeEventEmitter, 
} from 'react-native'; 
 
var Dimensions = require('Dimensions'); 
var ScreenWidth = Dimensions.get('window').width; 
var ScreenHeight = Dimensions.get('window').height; 
 
var kbHeight = require('NativeModules').KeyboardHeight; 
const kbHeightEvt = new NativeEventEmitter(kbHeight);

componentWillMount() { 
    this.heightChanged = kbHeightEvt.addListener('heightChanged', this._heightChanged.bind(this)); 
  } 
  componentDidMount() { 
 
  } 
  componentWillUnmount() { 
    this.heightChanged.remove(); 
  } 
  _heightChanged(data){ 
    // console.log(data); 
    this.keyboardHeight = data; 
    this.changeMarginTop();//這里我是處理高度的 
  }

The height has been obtained here, and the next step is to solve the problem of addition and subtraction.

We need to get the position of the input box on the screen, and then compare it with the height of the keyboard. We get the position of the input box through onLayout:

onLayoutParent(event){ 
    if (this.orgLayoutParent == null){//獲取的父組件的位置，因?yàn)橐玫接?jì)算 
      this.orgLayoutParent = event.nativeEvent.layout; 
    } 
    console.log('parent layout: ', event.nativeEvent.layout); 
  } 
  onLayoutMail(event){//獲取輸入框的位置，這個位置是相對父組件的位置，所以上面需要獲得父組件的 
    this.layoutMail = event.nativeEvent.layout; 
  } 
  onFocusMail(event){ 
    this.focusName = 'mail';//定義一個標(biāo)識，可以區(qū)分不同輸入框 
    this.changeMarginTop();//統(tǒng)一處理高度的函數(shù) 
  } 
  onSubmitMail(){ 
    drawLayout.setKBMoveY(0);//當(dāng)輸入完畢時，重置回原來的狀態(tài) 
  } 
  changeMarginTop(){//計(jì)算移動的距離 
    var layout = null; 
    if (this.focusName == 'mail'){ 
      layout = this.layoutMail; 
    } 
    if (layout && this.orgLayoutParent.y + layout.y + layout.height > ScreenHeight - this.keyboardHeight){ 
      drawLayout.setKBMoveY(-(this.orgLayoutParent.y + layout.y + layout.height - ScreenHeight + this.keyboardHeight)); 
    }else{//不對的置零處理 
      drawLayout.setKBMoveY(0); 
    } 
  } 
  render() { 
    return ( 
      <View style={[styles.container, this.props.style ? this.props.style : {}]} onLayout={this.onLayoutParent.bind(this)}> 
        <View style={[styles.viewStyle, {marginTop: 10}]} onLayout={this.onLayoutMail.bind(this)}>//這里獲取的是相對位置哦 
          <TextInput style={styles.textInputStyle} 
            onChangeText={this.onTextChange.bind(this)} 
            value={this.state.emailPath} 
            placeholder={&#39;請輸入郵箱&#39;} 
            onFocus={this.onFocusMail.bind(this)}//當(dāng)獲取到焦點(diǎn)時觸發(fā) 
            onSubmitEditing={this.onSubmitMail.bind(this)}/>//點(diǎn)擊回車時的調(diào)用，這里可以根據(jù)需求去做 
          <TouchableOpacity onPress={this.onSubmitSend.bind(this)}> 
            <View style={[styles.sendButtonView, {}]}> 
              <Text style={styles.sendButtonText}> 
                發(fā)送 
              </Text> 
            </View> 
          </TouchableOpacity> 
        </View> 
      </View> 
    ); 
  }

If you are currently one component and one page, there is no need to do what I did and add a global to record their grandfather components (mainly to move the entire page upward)

We have also calculated the distance. The next step is to add an animation to drawLayout, and then move it not so abruptly.

import React, { Component } from 'react'; 
import { 
 StyleSheet, 
 Text, 
 View, 
 TouchableOpacity, 
 Animated, 
} from 'react-native'; 
 
import SendEmail from './SendEmail'; 
 
export default class DrawLayout extends Component { 
 constructor(props){ 
  super(props); 
  this.state={ 
   kbShowY: new Animated.Value(0),//設(shè)置動畫的初始值 
  }; 
  global.drawLayout = this;//這里將自己保存到global里面，方便它的子組件調(diào)用 
 } 
 setKBMoveY(y){ 
  Animated.timing(//這里用的是timing均勻變化，具體的參數(shù)，可以參考RN的文檔，寫的很詳細(xì)了，這里就不啰嗦了。 
   this.state.kbShowY,{ 
    toValue: y,//變化到目的位置 
    delay: 250,//延時250毫秒 
   }, 
  ).start();//開始 
 } 
 componentWillUnmount() { 
  global.drawLayout = null;//降這個值賦值為空 
 } 
  
 render() { 
  return ( 
   <Animated.View style={[styles.container, {marginTop: this.state.kbShowY}]} >//使用Animated.View 
    <SendEmail style={{marginTop: 10}}/> 
   </Animated.View> 
  ); 
 } 
}

That’s it. Then take a screenshot to see the effect. Although there is animation, I can't make a dynamic picture

The above is the detailed content of How to solve the problem of Keyboard occlusion in React-Native?. For more information, please follow other related articles on the PHP Chinese website!