本文介紹了React-Native鍵盤遮擋問題，分享給大家
在開發中經常遇到需要輸入的地方，RN給我們提過的TextInput雖然好用，可惜并沒有處理遮擋問題。
很多時候鍵盤彈出來都會遮擋住編輯框，讓人很頭疼。
本來想在js.coach 庫里面找一找第三方的插件，看到最好的一個就是React-native-keyboard-spacer了，然而我們還差一個東西，那就是獲取鍵盤的高度。
這個我也查了半天并沒有提供，獲取沒找到吧。于是只好自己寫原生模塊去獲取鍵盤的高度了。
關于原生iOS獲取鍵盤高度我就不多說了，網上一大堆，我直接貼上我的代碼，自己根據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 這里其實我前面的博客也說過，一開始我想的是通過RCT_REMAP_METHOD去獲得高度，可惜在鍵盤第一次彈出的時候，并不是彈出之后的高度，獲取之后依然是0，所以添加了一個監聽函數heightChanged，當記錄的值和改變的值不一致時，調用監聽函數，將值傳給JS端。這樣就可以在檢測變化之后JS端做相應的變化。
好了，原生模塊封裝好了，接下來看js方面，這個也是老話題了，前面的博客都說了，直接貼代碼：
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();//這里我是處理高度的 } 這里已經拿到高度，接下來就好辦了，就是加減問題。
我們需要拿到輸入框在屏幕中的位置，然后和鍵盤的高度做比較，輸入框的位置我們通過onLayout獲?。?/p>
onLayoutParent(event){ if (this.orgLayoutParent == null){//獲取的父組件的位置，因為要用到計算 this.orgLayoutParent = event.nativeEvent.layout; } console.log('parent layout: ', event.nativeEvent.layout); } onLayoutMail(event){//獲取輸入框的位置，這個位置是相對父組件的位置，所以上面需要獲得父組件的 this.layoutMail = event.nativeEvent.layout; } onFocusMail(event){ this.focusName = 'mail';//定義一個標識，可以區分不同輸入框 this.changeMarginTop();//統一處理高度的函數 } onSubmitMail(){ drawLayout.setKBMoveY(0);//當輸入完畢時，重置回原來的狀態 } changeMarginTop(){//計算移動的距離 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={'請輸入郵箱'} onFocus={this.onFocusMail.bind(this)}//當獲取到焦點時觸發 onSubmitEditing={this.onSubmitMail.bind(this)}/>//點擊回車時的調用，這里可以根據需求去做 <TouchableOpacity onPress={this.onSubmitSend.bind(this)}> <View style={[styles.sendButtonView, {}]}> <Text style={styles.sendButtonText}> 發送 </Text> </View> </TouchableOpacity> </View> </View> ); } 如果你是當前一個組件一個頁面，就沒必要像我這樣做了，加了一個global，去記錄它們的祖父組件（主要是整個頁面向上移動）
距離我們也都算好了，接下來就是給drawLayout加一個動畫，然后動起來不要那么突兀。
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),//設置動畫的初始值 }; global.drawLayout = this;//這里將自己保存到global里面，方便它的子組件調用 } setKBMoveY(y){ Animated.timing(//這里用的是timing均勻變化，具體的參數，可以參考RN的文檔，寫的很詳細了，這里就不亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
国产精品国模在线|
国产日韩在线看片|
欧美黄网免费在线观看|
一区二区三区无码高清视频|
深夜精品寂寞黄网站在线观看|
久久人人爽人人爽人人片亚洲|
国产精品亚洲精品|
国产免费观看久久黄|
性亚洲最疯狂xxxx高清|
欧美亚洲视频在线观看|
97国产精品视频人人做人人爱|
丝袜美腿亚洲一区二区|
欧美精品在线看|
欧美在线观看视频|
91网站免费观看|
久久久久国产精品www|
日本伊人精品一区二区三区介绍|
韩国v欧美v日本v亚洲|
最近中文字幕mv在线一区二区三区四区|
国产精品十八以下禁看|
亚洲第一福利在线观看|
精品亚洲一区二区三区在线播放|
国产福利成人在线|
精品视频一区在线视频|
97精品在线观看|
日韩大陆毛片av|
亚洲香蕉成人av网站在线观看|
欧美重口另类videos人妖|
国内精品模特av私拍在线观看|
一个人看的www久久|
国产精品第3页|
亚洲欧美日韩一区二区在线|
久久国产精品久久久|
成人国产精品一区二区|
欧美成人午夜剧场免费观看|
国产日韩欧美在线|
国产女精品视频网站免费|
国产亚洲精品美女|
欧美性感美女h网站在线观看免费|
精品中文视频在线|
亚洲视频免费一区|
亚洲第一精品福利|
国产精品日韩一区|
日本一区二区三区四区视频|
亚洲视频一区二区|
日韩精品福利在线|
欧美肥婆姓交大片|
国产精品久久一|
精品国偷自产在线视频|
欧美日韩福利在线观看|
精品中文视频在线|
日韩激情在线视频|
1769国产精品|
国产精品中文久久久久久久|
亚洲黄页网在线观看|
亚洲国产精品资源|
国产日产欧美a一级在线|
亚洲精品视频久久|
青草青草久热精品视频在线网站|
国产欧美日韩精品在线观看|
日韩精品视频在线观看免费|
国产精品自产拍在线观看中文|
日韩精品极品视频|
欧美夫妻性生活视频|
国产亚洲精品久久久久动|
色狠狠久久aa北条麻妃|
国产69久久精品成人|
欧美精品在线极品|
成人午夜在线观看|
亚洲18私人小影院|
精品亚洲国产视频|
国产精品视频99|
日韩免费高清在线观看|
亚洲欧美在线一区二区|
97国产成人精品视频|
大桥未久av一区二区三区|
欧美精品在线播放|
午夜精品久久久久久久白皮肤|
亚洲精品国偷自产在线99热|
日韩中文字幕免费视频|
在线播放精品一区二区三区|
久久国产精品久久精品|
亚洲国产精品久久久久|
中文字幕精品在线视频|
欧美成人激情视频免费观看|
岛国av一区二区三区|
久久久97精品|
色综合色综合网色综合|
青青a在线精品免费观看|
亚洲日韩中文字幕在线播放|
久久人人爽人人爽人人片av高请|
福利一区福利二区微拍刺激|
成人激情视频网|
国产亚洲欧洲高清一区|
91美女片黄在线观|
日韩经典一区二区三区|
97久久精品人人澡人人爽缅北|
国产在线拍偷自揄拍精品|
国产精品偷伦免费视频观看的|
日本精品久久电影|
久久6免费高清热精品|
在线激情影院一区|
一本大道久久加勒比香蕉|
国产欧美日韩亚洲精品|
91av在线免费观看视频|
欧美性猛交xxxx免费看久久久|
欧美精品在线免费|
高清欧美电影在线|
日韩电影网在线|
国产成人精品亚洲精品|
欧美丰满少妇xxxxx做受|
伦理中文字幕亚洲|
亚洲人成电影网站色|
久久99视频免费|
久久精品免费播放|
91精品国产综合久久久久久蜜臀|
国产美女精品视频免费观看|
欧美电影免费观看电视剧大全|
国产91精品高潮白浆喷水|
欧美亚洲另类在线|
日韩av在线免费播放|
亚洲一区二区三区777|
亚洲高清av在线|
成人淫片在线看|
亚洲一级免费视频|
亚洲成人a**站|
国产精品人人做人人爽|
欧美黄色免费网站|
538国产精品一区二区免费视频|
精品香蕉在线观看视频一|
69视频在线免费观看|
国产精品国产自产拍高清av水多|
国产一区二区三区直播精品电影|
亚洲视频在线看|
日韩欧美一区二区三区久久|
国产美女扒开尿口久久久|
一区二区三区美女xx视频|
亚洲免费中文字幕|
伊人久久男人天堂|
中文字幕欧美亚洲|
国产成人精品午夜|
中文字幕亚洲欧美一区二区三区|
日本精品性网站在线观看|
国产精品久久久久高潮|
欧美在线不卡区|
欧美性极品xxxx做受|
欧美黑人巨大xxx极品|
精品国产乱码久久久久久天美|
亚洲国产精品悠悠久久琪琪|
日韩av资源在线播放|
热99精品只有里视频精品|
日本久久久a级免费|
国产精品白嫩美女在线观看|
欧美一区第一页|
97超级碰碰碰久久久|
久久久久久久久久久av|
九九热99久久久国产盗摄|
国产综合在线观看视频|
日韩成人高清在线|
亚洲一区中文字幕在线观看|
国产精彩精品视频|
亚洲激情视频在线播放|
国产精品免费一区|
国产亚洲欧美aaaa|