React Native 解决 ScrollView 中 TextInput 被软键盘遮挡一种解决方案

303

解决方法

  1. 引入 Keyboard

    import {Keyboard} from "react-native"

  2. 在组建加载完毕时,监听键盘展示、隐藏事件。动态设置键盘高度。

// 定义 state 
const [keyboardHeight, setKeyboardHeight] = useState(0);
​
// 组建加载完毕时监听事件
useEffect(() => {
  Keyboard.addListener("keyboardDidShow", e => {
    setKeyboardHeight(e.endCoordinates.height);
  });
  Keyboard.addListener("keyboardDidHide", e => {
    setKeyboardHeight(0);
  });
  return () => {
    //  组建卸载时,移除事件监听
    Keyboard.removeAllListeners("keyboardDidShow", "keyboardDidHide");
  }
}, [])
  1. 根据是否弹出软件盘动态设计ScrollView的高度
<ScrollView style={{width: screenWidth, height: screenHeight - keyboardHeight}}>
  <View>
    <TextInput />
    <TextInput />
    {...}
  </View>
</ScrollView>

效果图

image.png

image.png 注:

  1. 人物输入框在软件盘弹出之后会定位到键盘上方,比较舒服的滚动逻辑。
  2. 效果图是实际项目应用的效果,scrollview 默认高度不是屏幕高度。

说明

  1. React Native 版本:0.66;
  2. 官方提供的避免遮挡的KeyboardAvoidingView,并不好用,效果较差;
  3. 第三方组件库也尝试过,很多都是旧版本了,尝试使用没有成功;
  4. 这个方法可能只适用于当前这种情况,我这里给大家提供解决这种情况的一种方法,可能有点取巧,而且经过测试大部分情况下都会没问题的,打包之后情况应该会好更多。