React Native实现多行TextInput获焦全屏、失焦恢复功能问询

当然可以搞定这个需求！我之前在项目里做过类似的交互，确实能大大提升长文本输入的体验。下面是一套完整的实现方案，你可以直接复用或者根据自己的需求调整：

核心逻辑是通过状态变量控制TextInput的样式切换，再配合React Native的原生API处理焦点和硬件返回键：

• 用isFullscreen状态标记当前是否处于全屏输入模式
• 获焦时切换为全屏样式，隐藏其他界面元素（可选）
• 失焦或触发Android返回键时恢复原有尺寸，收起键盘
• 拦截Android硬件返回键，避免用户误操作退出页面

import React, { useState, useEffect } from 'react';
import { View, TextInput, StyleSheet, BackHandler, Keyboard } from 'react-native';

const FullscreenTextInput = ({ 
  initialValue, 
  onChangeText, 
  placeholder, 
  defaultHeight = 100,
  inputStyle // 允许传入自定义基础样式
}) => {
  const [text, setText] = useState(initialValue || '');
  const [isFullscreen, setIsFullscreen] = useState(false);

  // 监听Android硬件返回键
  useEffect(() => {
    const handleBackPress = () => {
      if (isFullscreen) {
        setIsFullscreen(false);
        Keyboard.dismiss();
        return true; // 拦截默认返回行为
      }
      return false; // 不拦截，执行页面返回
    };

    const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackPress);
    return () => backHandler.remove(); // 组件卸载时移除监听
  }, [isFullscreen]);

  // 处理文本输入变化
  const handleTextChange = (newText) => {
    setText(newText);
    onChangeText?.(newText);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={[
          styles.baseInput,
          inputStyle,
          !isFullscreen ? { height: defaultHeight } : styles.fullscreenInput
        ]}
        multiline
        value={text}
        onChangeText={handleTextChange}
        placeholder={placeholder || '输入内容...'}
        onFocus={() => setIsFullscreen(true)}
        onBlur={() => setIsFullscreen(false)}
        autoCapitalize="sentences"
        textAlignVertical="top" // 确保文本从顶部开始输入
        autoCorrect={false} // 根据需求开启/关闭自动校正
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    marginVertical: 12,
  },
  baseInput: {
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderRadius: 8,
    padding: 14,
    fontSize: 16,
    backgroundColor: '#ffffff',
  },
  fullscreenInput: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    borderRadius: 0,
    borderWidth: 0,
    fontSize: 18,
    padding: 20,
    backgroundColor: '#ffffff',
    zIndex: 1000, // 确保全屏输入框在最上层
  },
});

export default FullscreenTextInput;

1. Android返回键适配：通过BackHandler监听硬件返回事件，在全屏状态下优先退出输入模式，而不是直接退出页面，符合用户预期
2. 样式切换逻辑：全屏时使用position: absolute占满整个屏幕，去掉边框和圆角，同时放大字体提升长文本可读性
3. 可扩展性：通过inputStyle属性允许传入自定义样式，defaultHeight可以灵活设置初始输入框高度
4. 键盘处理：退出全屏时主动调用Keyboard.dismiss()，避免键盘残留导致界面错乱

• 添加退出按钮：可以在全屏模式下添加一个右上角的关闭按钮，给iOS用户更直观的退出入口
• 动画过渡：用Animated组件实现高度变化的平滑过渡，让全屏切换更自然
• 隐藏导航栏：如果使用React Navigation，可以在全屏时通过navigation.setOptions隐藏顶部导航栏，进一步强化全屏体验
• 自动保存：添加定时保存或失焦保存逻辑，避免用户输入内容丢失

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