《React-Native系列》44、基于多个TextInput的键盘遮挡处理方案优化

最新推荐文章于 2023-07-31 09:02:43 发布

coder_小刀

最新推荐文章于 2023-07-31 09:02:43 发布

阅读量7.4k

点赞数 1

分类专栏： ReactNative ReactNative实战系列文章标签： ReactNative 键盘遮挡表单移动优化

本文链接：https://blog.csdn.net/codetomylaw/article/details/55519919

版权

以前写过两篇关于在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 ==