React Native：点击TextInput时Header上滑消失，如何固定其位置？

点击TextInput后Header被顶出屏幕不可见，期望点击输入框时Header保持固定位置。已在AndroidManifest中配置：

android:windowSoftInputMode="adjustPan"

import React from 'react';
import {
  View,
  Dimensions,
  TextInput,
  ScrollView,
  StatusBar,
  Text,
  KeyboardAvoidingView,
} from 'react-native';
const {width, height} = Dimensions.get('window');

const Conversation = ({}) => {
  return (
    <>
      <StatusBar hidden />
      <View
        style={{
          backgroundColor: 'gray',
          height: 50,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text center style={{color: 'white'}}>
          Header
        </Text>
      </View>

      <KeyboardAvoidingView behavior="padding" style={{flex:1}}>
        <TextInput
          style={{
            backgroundColor: 'white',
            borderWidth: 1,
            height: 50,
            marginHorizontal: width * 0.1,
            top: height * 0.9,
          }}
        />
      </KeyboardAvoidingView>
    </>
  );
};

export default Conversation;

问题根源在于adjustPan的系统配置、TextInput的固定定位方式，以及KeyboardAvoidingView的适配逻辑，按以下步骤修改即可解决：

1. 调整AndroidManifest配置
   将adjustPan替换为adjustResize，让系统在键盘弹出时调整窗口高度而非平移整个页面，从底层避免Header被顶出视野。

2. 重构布局结构

• 用ScrollView包裹输入区域，配合KeyboardAvoidingView实现键盘适配，同时保证Header固定在顶部。
• 抛弃top: height * 0.9这种固定定位，改用flex布局将输入框固定在页面底部，避免布局偏移。

修改后的代码：

import React from 'react';
import {
  View,
  TextInput,
  ScrollView,
  StatusBar,
  Text,
  KeyboardAvoidingView,
  Platform
} from 'react-native';

const Conversation = () => {
  return (
    <>
      <StatusBar hidden />
      {/* 固定Header，独立于滚动区域之外 */}
      <View
        style={{
          backgroundColor: 'gray',
          height: 50,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text style={{color: 'white'}}>
          Header
        </Text>
      </View>

      {/* 跨平台键盘适配容器 */}
      <KeyboardAvoidingView 
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        style={{flex: 1}}
      >
        <ScrollView style={{flex:1}} keyboardShouldPersistTaps="handled">
          {/* 占位区域，模拟页面其他内容 */}
          <View style={{flex:1}} />
          
          {/* 底部输入框，用marginBottom保证不被键盘遮挡 */}
          <TextInput
            style={{
              backgroundColor: 'white',
              borderWidth: 1,
              height: 50,
              marginHorizontal: 20,
              marginBottom: 10,
            }}
            placeholder="输入消息..."
          />
        </ScrollView>
      </KeyboardAvoidingView>
    </>
  );
};

export default Conversation;

3. 关键说明

• adjustResize：Android系统会在键盘弹出时缩小窗口高度，Header作为独立的顶部View，不会被纳入调整范围，始终保持可见。
• 平台差异化behavior：iOS用padding、Android用height，是KeyboardAvoidingView在不同平台的最优适配方案。
• ScrollView+flex布局：既保证输入框固定在底部，又让页面内容可滚动，避免因键盘弹出导致的布局错乱。

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