SDK 33设备上KeyboardAwareScrollView关闭键盘后内容模糊问题

问题详情 #

在React Native应用中，用户编辑输入框后点击键盘关闭按钮，KeyboardAwareScrollView内的内容会出现模糊或显示透明背景的情况。该问题仅出现在运行SDK 33（Android 13）的设备上，SDK 34和SDK 32模拟器上KeyboardAwareScrollView运行正常；替换为普通ScrollView也存在部分类似问题。

相关代码如下：

import {
  Image,
  Text,
  TouchableOpacity,
  View,
  Keyboard,
  TouchableWithoutFeedback,
} from 'react-native';
import React, {useContext, useState} from 'react';
import styles from './style';
import imagePath from '../../constants/imagePath';
import Input from '../../components/Input';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import colors from '../../constants/colors';
import Button from '../../components/Button';
import navigationStrings from '../../constants/navigationStrings';
import globalStyle from '../../styles/globalStyle';
import {AuthContext} from '../../context/AuthContext';
import {passwordValidation, phoneNumberValidation} from '../../uitls/Helper';
import Loader from '../../components/Loader';
import {showAlert} from '../../uitls/Helper';

const Login = ({navigation}) => {
  const {login, loginLoader} = useContext(AuthContext);
  const [phoneNo, setPhoneNo] = useState('');
  const [password, setPassword] = useState('');
  const [isVisible, setVisible] = useState(true);

  const submit = async () => {
    if (phoneNo && password) {
      if (phoneNumberValidation(phoneNo)) {
        if (!passwordValidation(password)) {
          showAlert(
            'Warning',
            'The password must be at least 6 characters long and must include at least one uppercase character,one number and one special character',
          );
          return;
        }
        login(phoneNo, password);
      } else {
        showAlert('Warning', 'Invalid Phone no');
      }
    } else {
      showAlert('Warning', 'Please fill all the details');
    }
  };

  return (
    <View style={{flex:1}}>
      <KeyboardAwareScrollView style={styles.container}>
        <View style={styles.loginContainer}>
          <Image source={imagePath.logo} style={styles.imgStyle} />
          <Text style={styles.heading}>Sign In</Text>
          <Input
            placeHolder="Mobile Number *"
            value={phoneNo}
            onChangeText={value => setPhoneNo(value)}
            keyboardType="numeric"
            maxLength={10}
          />
          <Input
            placeHolder="Enter password *"
            floatingLabel={'Password *'}
            value={password}
            onChangeText={value => setPassword(value)}
            secureTextEntry={isVisible}
            rightIcon={isVisible ? imagePath?.hideEye : imagePath?.showEye}
            onPressRight={() => setVisible(!isVisible)}
            autoCapitalize="none"
          />
          <View style={styles.textRowcontainer}>
            <TouchableOpacity>
              <Text style={styles.text2}>Login with OTP</Text>
            </TouchableOpacity>
            <TouchableOpacity>
              <Text style={styles.text2}>Forgot password?</Text>
            </TouchableOpacity>
          </View>
          <Button btnStyle={styles.btn} title={'Submit'} onPress={submit} />
          <View
            style={{
              ...globalStyle.rowContainer,
              marginVertical: 10,
              marginTop: 20,
              alignSelf: 'center',
            }}>
            <Text style={styles.footerText}>Don’t have an account? </Text>
            <TouchableOpacity
              onPress={() => navigation.navigate(navigationStrings.REGISTER)}>
              <Text style={{...styles.footerText, color: colors.blue}}>
                Sign Up
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <Loader visible={loginLoader} />
      </KeyboardAwareScrollView>
    </View>
  );
};

export default Login; 

解决方法 #

1. 禁用KeyboardAwareScrollView的Android特定优化 #

SDK33（Android13）的键盘行为有变更，KeyboardAwareScrollView的默认适配可能产生冲突。尝试添加enableOnAndroid={false}属性，手动处理键盘事件：

<KeyboardAwareScrollView 
  style={styles.container}
  enableOnAndroid={false}
>
  {/* 页面内容 */}
</KeyboardAwareScrollView>

2. 手动监听键盘关闭事件，强制重渲染 #

通过Keyboard.addListener监听键盘关闭事件，触发组件重渲染修复显示异常：

import { Keyboard } from 'react-native';

const Login = ({navigation}) => {
  // ... 现有状态定义
  
  React.useEffect(() => {
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        // 触发重渲染，修复模糊/透明问题
        setPhoneNo(prev => prev);
      }
    );

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

  // ... 其余代码
};

3. 明确ScrollView及父容器的背景色 #

确保KeyboardAwareScrollView或外层View有明确的背景色，避免键盘收起时因布局变化导致透明：

// 在styles.container中添加背景色配置
container: {
  flex: 1,
  backgroundColor: colors.blue, // 匹配你的页面背景色
}

4. 更新react-native-keyboard-aware-scroll-view库 #

该问题可能属于版本兼容问题，尝试更新到最新版本：

npm update react-native-keyboard-aware-scroll-view
# 或使用yarn
yarn upgrade react-native-keyboard-aware-scroll-view

5. 调整Android窗口软输入模式 #

在android/app/src/main/AndroidManifest.xml中修改Activity的软输入模式，避免键盘收起时的布局异常：

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustResize">
  <!-- 其他原有配置 -->
</activity>

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