React Native：数字等字符引发键盘遮挡光标问题求助

问题场景 #

• 单独使用多行TextInput时，滚动过度会触发不必要的键盘弹出，普通滚动还会被识别为文本选择，不符合预期。
• 将TextInput嵌套进ScrollView后，上述问题解决，但出现新异常：点击屏幕底部的纯字母单词时，键盘弹出后文本自动上移，光标正常显示；但点击底部的数字、字母数字混合内容或空白行时，文本不会上移，光标被键盘遮挡，需手动滚动才能查看。
• 尝试过KeyboardAvoidingView（解决光标问题但打乱布局）、KeyboardAwareScrollView，均未找到理想方案，寻求简洁解决办法。

环境 #

React Native 69.6、Expo 46、安卓手机、Android Studio

简化复现代码 #

import React from "react";
import { StyleSheet, TextInput, ScrollView } from "react-native";

export default function MyScreen() {
    return (
        <ScrollView
            style={{ flex: 1 }}
            contentContainerStyle={{
                // flex: 1,     <--- 取消注释会回到最初的问题
                paddingHorizontal: 10,
                paddingVertical: 5,
            }}
        >
            <TextInput
                multiline={true}
                style={{ fontSize: 16 }}
                value={`Lorem Ipsum...`}
            />
        </ScrollView>
    );
}

解决方案 #

方案1：禁用安卓全屏编辑UI（最简） #

给TextInput添加disableFullscreenUI={true}属性，同时禁用自身滚动：

<TextInput
  multiline={true}
  style={{ fontSize: 16 }}
  value={`Lorem Ipsum...`}
  scrollEnabled={false} // 禁用TextInput自身滚动，交给ScrollView处理
  disableFullscreenUI={true} // 禁用安卓全屏编辑模式，统一滚动行为
/>

原理：安卓默认会对数字、混合内容等文本类型启用全屏编辑UI，该模式会干扰ScrollView的自动滚动逻辑，禁用后可让ScrollView统一处理键盘弹出时的内容滚动。

方案2：监听键盘事件强制滚动到光标位置 #

如果方案1无效，可通过监听键盘弹出事件，手动让ScrollView滚动到光标位置：

import React, { useRef } from "react";
import { StyleSheet, TextInput, ScrollView, Keyboard, findNodeHandle } from "react-native";

export default function MyScreen() {
  const scrollViewRef = useRef(null);
  const textInputRef = useRef(null);

  const handleInputFocus = () => {
    const keyboardListener = Keyboard.addListener('keyboardDidShow', () => {
      if (textInputRef.current) {
        const inputNode = findNodeHandle(textInputRef.current);
        scrollViewRef.current?.scrollToNode({ node: inputNode, animated: true });
      }
    });

    // 组件卸载时移除监听
    return () => keyboardListener.remove();
  };

  return (
    <ScrollView
      ref={scrollViewRef}
      style={{ flex: 1 }}
      contentContainerStyle={{
        paddingHorizontal: 10,
        paddingVertical: 5,
      }}
      keyboardShouldPersistTaps="handled" // 避免点击文本意外关闭键盘
    >
      <TextInput
        ref={textInputRef}
        multiline={true}
        style={{ fontSize: 16, minHeight: '100%' }} // 确保输入框高度足够
        value={`Lorem Ipsum...`}
        scrollEnabled={false}
        onFocus={handleInputFocus}
      />
    </ScrollView>
  );
}

原理：通过scrollToNode方法强制ScrollView滚动到TextInput的焦点位置，忽略系统对不同文本类型的差异化处理，保证光标始终显示在键盘上方。

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