React Native手势返回时KeyboardAvoidingView留白问题求助

核心原因 #

键盘激活时，KeyboardAvoidingView会调整父容器的布局参数（如padding或height），而手势返回时，键盘收起时机与导航组件的布局重置时机不匹配，导致HomeScreen布局未恢复初始状态，从而出现空白区域。

解决方案 #

方案1：在FormMainScreen监听页面失焦，主动收起键盘 #

通过useFocusEffect监听页面失焦事件，强制收起键盘，确保布局参数能正常重置：

// FormMainScreen.jsx
import { View, TextInput, StyleSheet, KeyboardAvoidingView, Platform, Keyboard } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
import React from 'react';

const FormMainScreen = () => {
  useFocusEffect(
    React.useCallback(() => {
      return () => {
        // 页面离开时强制收起键盘
        Keyboard.dismiss();
      };
    }, [])
  );

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}
    >
      <TextInput
        style={styles.input}
        placeholder="Enter text here"
        autoFocus
      />
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  input: {
    width: '80%',
    height: 40,
    borderWidth: 1,
    borderColor: '#ccc',
    paddingHorizontal: 10,
  },
});

export default FormMainScreen;

方案2：在HomeScreen监听键盘收起，强制刷新布局 #

通过监听键盘收起事件，触发状态更新来强制HomeScreen重新渲染，修复布局异常：

// HomeScreen.jsx
import { View, Text, StyleSheet, Keyboard } from 'react-native';
import React, { useEffect, useState } from 'react';

const HomeScreen = () => {
  const [triggerRefresh, setTriggerRefresh] = useState(false);

  useEffect(() => {
    const keyboardHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => setTriggerRefresh(prev => !prev)
    );

    return () => keyboardHideListener.remove();
  }, []);

  return (
    <View style={[styles.container, triggerRefresh && {}]}>
      <Text>Home Screen Content</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

export default HomeScreen;

方案3：替换原生KeyboardAvoidingView为第三方库 #

如果原生组件兼容性问题难以解决，可使用更稳定的第三方库react-native-keyboard-aware-scroll-view：
先安装依赖：

npm install react-native-keyboard-aware-scroll-view

再修改FormMainScreen：

// FormMainScreen.jsx
import { View, TextInput, StyleSheet } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const FormMainScreen = () => {
  return (
    <KeyboardAwareScrollView
      style={styles.container}
      enableOnAndroid={true}
    >
      <TextInput
        style={styles.input}
        placeholder="Enter text here"
        autoFocus
      />
    </KeyboardAwareScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  input: {
    width: '80%',
    height: 40,
    borderWidth: 1,
    borderColor: '#ccc',
    paddingHorizontal: 10,
    alignSelf: 'center',
    marginTop: '50%',
  },
});

export default FormMainScreen;

额外注意事项 #

• 确保HomeScreen的根容器设置了flex: 1，保证布局能占满屏幕
• iOS端可尝试调整KeyboardAvoidingView的keyboardVerticalOffset属性，适配导航栏高度差异

内容的提问来源于stack exchange，提问作者Mohmed Vaid