以前写过两篇关于在ReactNative上处理键盘遮挡输入表单TextInput的情况,建议读者可以先看看
1、《React-Native系列》33、 键盘遮挡问题处理
2、《React-Native系列》42、键盘遮挡问题官方处理方法KeyboardAvoidingView
以前给出的解决方案,是使用ScrollView的scrollTo方法,将表单的输入域移动到可见区域(从键盘遮挡处移到键盘上方)。
这个方案存在以下问题:
1、移动距离的计算不精确
2、如果表单中有多个TextInput,怎么处理?
今天,我们来给出个比较好的方案。
'use strict';
import React, { Component } from 'react';
import {
View,
Text,
ScrollView,
NativeModules,
TouchableOpacity,
TouchableHighlight,
AppRegistry,
Image,
Platform,
TextInput,
Dimensions,
Keyboard,
}from 'react-native';
var dismissKeyboard = require('dismissKeyboard');
const {width, height} = Dimensions.get('window');
import styles from '../styles/goods/Spec.css';
export default class Spec extends Component {
constructor(props) {
super(props);
this.state = {
groupValueList:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
};
this.contentHeight = 0;
this.textInputView = null;//当前编辑的textInput
this.moveH = 0;//ScrollView滑动的距离
this.lastMoveH = 0;//保留上次滑动的距离
this.needMove = false;//弹出键盘时,textInputView是否需要滑动
}
componentWillMount(){
if (Platform.OS ==