React Rative ScrollView中嵌套TextInput定位错误的解决方案

转载请注明出处王亟亟的大牛之路

这一期有一个把一个带输入框的一个Modal改成直接显示在页面上,之前 Modal使用的是KeyboardAvoidingView配合ViewonLayout方法计算弹窗高度来实现效果,现在是直接迁移到页面上,所以就直接使用ScrollView嵌套TextInput来实现
之前的效果看这个:https://blog.csdn.net/ddwhan0123/article/details/87350792


实现效果

React Rative ScrollView中嵌套TextInput定位错误的解决方案_第1张图片


实现思路

使用Keyboard添加keyboardDidShowListener,keyboardDidHideListener的监听根据不同的事件利用ScrollView自身提供的scrollTo方法使得ScrollView始终滚动到我们希望他待着的地方


实施过程

1.导入Keyboard文件

import {Keyboard} from "react-native";

2.在componentDidMountcomponentWillUnmount两个生命周期的回调函数中添加以及移除监听

2.1 添加监听

    componentDidMount() {
        this.keyboardDidShowListener = Keyboard.addListener(
            'keyboardDidShow',
            this._keyboardDidShow,
        );
        this.keyboardDidHideListener = Keyboard.addListener(
            'keyboardDidHide',
            this._keyboardDidHide,
        );
    }

2.2 移除监听

   componentWillUnmount() {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }

2.3 实现监听回调

 	_keyboardDidShow = () => {
        this.scrollToBottom(this);
    };

    _keyboardDidHide = () => {
        this.scrollToBottom(this);
    };

	//我这里实现是永远回到最下面
	 scrollToBottom(that) {
        let refData = that.refs._scrollView;
        this._timer && clearTimeout(this._timer);
        this._timer = setTimeout(() => {
            refData.scrollToEnd({animated: true});
        }, 150);
    };

2.4 被关联的列表

   
			
				
				........
				                    


整体实现比较简单,为什么写这篇主要是网上一大堆要么用第三方的,要么各种写死的’padding’,写一篇自己记录下。

谢谢!!!

React Rative ScrollView中嵌套TextInput定位错误的解决方案_第2张图片

你可能感兴趣的:(混合开发,React,Native官方学习之路)