React Native 键盘遮挡问题几行代码解决

先看几张效果图：

• 没做任何处理：

View.gif

• 用KeyboardAvoidingView处理:

KeyboardAvoidingView.gif

• 用ScrollView处理：

ScrollView.gif

根据实际效果，这里只介绍怎么用ScrollView来解决键盘遮挡问题。真的是几行代码的事：

import {
    ......
    ScrollView,  // 引入相关组件
    Keyboard,
} from 'react-native';


// 监听键盘弹出与收回
componentDidMount() {
        this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow',this.keyboardDidShow);
        this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide',this.keyboardDidHide);
    }

//注销监听
componentWillUnmount () {
        this.keyboardWillShowListener && this.keyboardWillShowListener.remove();
        this.keyboardWillHideListener && this.keyboardWillHideListener.remove();
    }

//键盘弹起后执行
keyboardDidShow = () =>  {
        this._scrollView.scrollTo({x:0, y:100, animated:true});
    }

//键盘收起后执行
keyboardDidHide = () => {
        this._scrollView.scrollTo({x:0, y:0, animated:true});
    }

用ScrollView将TextInput等组件包一层：

<ScrollView ref={component => this._scrollView=component} scrollEnabled={false}
                        keyboardShouldPersistTaps={true}>
      ...... // 其他组件代码

</ScrollView>

这样基本就将键盘遮挡问题很好的解决了，位移100可以根据实际情况做一些修改，你也可以直接设成键盘的高度。

这里引入另一个知识点：对组件的引用（refs）

哈哈，貌似代码不止几行，而是十多行😝。