React Native：键盘与评论输入框间出现空白问题求助

问题描述 #

开发React Native应用时，已经使用KeyboardAvoidingView组件处理键盘遮挡问题，但键盘弹出后，仍会与评论输入框之间出现空白区域，问题未得到解决。

相关代码 #

逻辑与UI代码 #

import { useState, useEffect, Platform, Keyboard, KeyboardAvoidingView, ScrollView, View, StyleSheet } from 'react-native';

const [isKeyboardVisible, setKeyboardVisible] = useState(false);
const [offsetValue, setOffsetValue] = useState(0);

useEffect(() => {
  const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", () => {
    setKeyboardVisible(true);
  });
  const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => {
    setKeyboardVisible(false);
  });
  if (appState === "active") {
    isKeyboardVisible && Keyboard.dismiss();
  }
  return () => {
    keyboardDidHideListener.remove();
    keyboardDidShowListener.remove();
  };
}, []);

useEffect(() => {
  if (isKeyboardVisible) {
    setOffsetValue(0);
  } else {
    setOffsetValue(80);
  }
}, [isKeyboardVisible]);

return (
  <KeyboardAvoidingView
    behavior={Platform.OS === "ios" ? "padding" : "height"}
    keyboardVerticalOffset={Platform.OS === "ios" ? offsetValue : 0}
  >
    <ScrollView
      contentContainerStyle={styles.scrollViewContainer}
      alwaysBounceVertical={false}
      keyboardShouldPersistTaps={"handled"}
    >
      <View style={styles.chatInputBoxWrapper}>
        <AvyCommentLinearInput
          inputRef={props.setInputRef}
          value={props.inputValue}
          isVideoCaptureEnabled={true}
          imageUrl={""}
          onSubmit={(value) => props.onChatSubmit(value)}
        />
      </View>
    </ScrollView>
  </KeyboardAvoidingView>
);

样式代码 #

export default StyleSheet.create({
  scrollViewStyle: {
    marginHorizontal: 16,
    borderRadius: 4,
    marginBottom: 8,
    marginTop: 8,
  },
  chatInputBoxWrapper: {
    ...shadowStyle,
    flex: 1,
  },
  scrollViewContainer: { flexGrow: 1 },
});

问题演示 #

有演示视频可直观展示键盘弹出后，与评论输入框之间出现空白的具体现象。

恳请各位提供可行的解决方案！

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