React Native键盘唤起页面整体上移，求助仅评论输入框上移方案

方案1：绝对定位+键盘事件监听 #

把评论输入框固定在页面底部，通过监听键盘弹出/收起事件，动态调整输入框的位置，避免整个页面被顶起。

1. 引入依赖模块：

import { Keyboard, Animated, View, TextInput } from 'react-native';

2. 组件内实现动画与监听逻辑：

const inputBottom = useRef(new Animated.Value(0)).current;

useEffect(() => {
  const handleKeyboardShow = (e) => {
    Animated.timing(inputBottom, {
      toValue: e.endCoordinates.height,
      duration: e.duration,
      useNativeDriver: false,
    }).start();
  };

  const handleKeyboardHide = (e) => {
    Animated.timing(inputBottom, {
      toValue: 0,
      duration: e.duration,
      useNativeDriver: false,
    }).start();
  };

  const showListener = Keyboard.addListener('keyboardWillShow', handleKeyboardShow);
  const hideListener = Keyboard.addListener('keyboardWillHide', handleKeyboardHide);

  return () => {
    showListener.remove();
    hideListener.remove();
  };
}, []);

3. 渲染评论输入框：

<Animated.View style={{ 
  position: 'absolute', 
  bottom: inputBottom, 
  left: 0, 
  right: 0,
  paddingHorizontal: 12,
  paddingVertical: 8,
  backgroundColor: '#fff'
}}>
  <TextInput 
    placeholder="写下你的评论..."
    style={{ 
      borderWidth: 1, 
      borderColor: '#eee', 
      borderRadius: 20, 
      paddingHorizontal: 16, 
      paddingVertical: 10 
    }}
  />
</Animated.View>

方案2：拆分结构+KeyboardAvoidingView精准包裹 #

避免用KeyboardAvoidingView包裹整个页面，只单独包裹评论输入框区域，同时确保页面主体内容固定。

1. 调整页面结构：

<View style={{ flex: 1 }}>
  {/* 页面主体内容，固定不动 */}
  <ScrollView style={{ flex: 1 }}>
    {/* 详情页的所有内容，比如商品信息、评价列表等 */}
  </ScrollView>

  {/* 仅评论输入框区域使用KeyboardAvoidingView */}
  <KeyboardAvoidingView 
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    style={{ width: '100%' }}
  >
    <View style={{ 
      flexDirection: 'row', 
      alignItems: 'center', 
      padding: 10, 
      borderTopWidth: 1, 
      borderColor: '#eee' 
    }}>
      <TextInput 
        style={{ flex: 1, borderWidth: 1, borderRadius: 20, padding: 8, marginRight: 10 }}
        placeholder="输入评论..."
      />
      <TouchableOpacity>
        <Text style={{ color: '#007AFF' }}>发送</Text>
      </TouchableOpacity>
    </View>
  </KeyboardAvoidingView>
</View>

2. 关键注意点：

• 不要将KeyboardAvoidingView嵌套在ScrollView内部，否则会带动整个滚动区域上移。
• iOS平台使用padding行为，Android平台使用height行为，适配不同系统的键盘逻辑。

方案3：Android端单独配置windowSoftInputMode #

如果是Android端问题，先在AndroidManifest.xml中修改对应Activity的配置，阻止页面整体上移：

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustPan">
</activity>

之后再配合方案1或2的输入框单独适配逻辑，即可实现仅输入框上移的效果。

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