React Native Expo iOS端KeyboardAwareScrollView遮挡TextInput问题求助

核心解决方案 #

• 使用KeyboardAwareView包裹底部输入区域，让输入框随键盘弹出自动上移
• 调整KeyboardAwareScrollView的布局属性，确保消息列表占满剩余空间
• 修复定时器内存泄漏问题

修改后的完整代码 #

import { Text, TextInput, View, useEffect } from "react-native";
import { KeyboardAwareScrollView, KeyboardAwareView } from "react-native-keyboard-aware-scroll-view";
import { SafeAreaView } from "react-native-safe-area-context";
import { useState } from "react";

export default function Home() {
  const [input, setInput] = useState(null);
  const [numNewMessages, setNumNewMessages] = useState(0);

  useEffect(() => {
    // 用useEffect包裹定时器，避免重复创建和内存泄漏
    const interval = setInterval(() => {
      setNumNewMessages(prev => prev + 1);
    }, 3000);

    // 组件卸载时清除定时器
    return () => clearInterval(interval);
  }, []);

  return (
    <SafeAreaView className="flex h-full">
      {/* 消息列表区域：占满除输入框外的所有空间 */}
      <KeyboardAwareScrollView 
        className="flex-grow bg-blue-100"
        keyboardShouldPersistTaps="handled"
        enableResetScrollToCoords={false}
      >
        {[...Array(10)].map((e, i) => (
          <Text key={i} className="my-10">
            Hello {i}!
          </Text>
        ))}

        {[...Array(numNewMessages)].map((e, i) => (
          <Text key={i} className="my-10">
            New msg {i}!
          </Text>
        ))}
      </KeyboardAwareScrollView>

      {/* 用KeyboardAwareView包裹输入框，确保键盘弹出时自动上移 */}
      <KeyboardAwareView>
        <View className="p-3">
          <TextInput
            className="placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 px-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm"
            placeholder="Type your message"
            onChangeText={(value) => setInput(value)}
            value={input}
          />
        </View>
      </KeyboardAwareView>
    </SafeAreaView>
  );
}

关键改动说明 #

1. KeyboardAwareView包裹输入区域：
   依赖库提供的KeyboardAwareView会自动监听键盘状态，动态调整自身位置，既保证输入框固定在屏幕底部，又不会被弹出的键盘遮挡。

2. ScrollView属性优化：

   • flex-grow确保KeyboardAwareScrollView占满SafeAreaView中除输入框外的全部空间
   • keyboardShouldPersistTaps="handled"保证点击消息列表时键盘不会自动收起，提升交互流畅度
   • enableResetScrollToCoords={false}避免键盘收起时滚动视图自动重置滚动位置

3. 定时器内存泄漏修复：
   将setInterval放入useEffect并添加清理函数，避免组件重复渲染时创建多个定时器，防止内存泄漏问题。

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