W?hrend der Entwicklung sto?en wir h?ufig auf Stellen, an denen Eingaben erforderlich sind. Obwohl der von RN erw?hnte TextInput einfach zu verwenden ist, l?st er das Okklusionsproblem leider nicht.

Oft erscheint die Tastatur und blockiert das Bearbeitungsfeld, was Kopfschmerzen bereitet.

Ursprünglich wollte ich in der js.coach-Bibliothek nach Plug-ins von Drittanbietern suchen, und das beste, das ich gesehen habe, war React-native-keyboard-spacer. Eines fehlt uns jedoch noch ist die Tastatur hoch zu bekommen.

Ich habe das auch lange überprüft und es wurde nicht bereitgestellt. Also musste ich mein eigenes natives Modul schreiben, um die H?he der Tastatur zu ermitteln.

Ich werde nicht viel über die Tastaturh?he in nativem iOS sagen. Es gibt viele davon im Internet. Ich habe meinen Code direkt auf Basis von RN geschrieben:

// 
// 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

Tats?chlich stand in meinem vorherigen Blog auch, dass ich zun?chst die H?he über RCT_REMAP_METHOD ermitteln wollte. Als die Tastatur zum ersten Mal auftauchte, war sie nach dem Auftauchen leider nicht mehr vorhanden. Nachdem ich es erhalten hatte, war es immer noch 0, also habe ich eine Abh?rfunktion heightChanged hinzugefügt. Wenn der aufgezeichnete Wert nicht mit dem ge?nderten Wert übereinstimmt, wird die Abh?rfunktion aufgerufen und der Wert an die JS-Seite übergeben. Auf diese Weise kann die JS-Seite nach Erkennung der ?nderungen entsprechende ?nderungen vornehmen.

Okay, das native Modul ist gekapselt. Dies ist auch ein altes Thema. Fügen Sie einfach den Code ein ??>

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);

Die H?he wurde hier ermittelt, und der n?chste Schritt besteht darin, das Problem der Addition und Subtraktion zu l?sen.

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();//這里我是處理高度的 
  }

Wenn Sie derzeit eine Komponente und eine Seite haben, besteht keine Notwendigkeit, das zu tun, was ich getan habe, und ein Global hinzuzufügen, um ihre Gro?vaterkomponenten aufzuzeichnen (haupts?chlich, um die gesamte Seite nach oben zu verschieben).

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> 
    ); 
  }

Animation
hinzuzufügen und diese dann nicht so abrupt zu verschieben.

Das ist es. Machen Sie dann einen Screenshot, um den Effekt zu sehen. Obwohl es eine Animation gibt, kann ich kein dynamisches Bild erstellen

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> 
  ); 
 } 
}

Das obige ist der detaillierte Inhalt vonWie kann das Problem der Tastaturverdeckung in React-Native gel?st werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!