React Native中KeyboardAwareScrollView搭配固定底部按钮的Android适配问题

在React Native里用KeyboardAwareScrollView做页面，想让底部按钮固定在屏幕底部，把按钮放组件外面后，Android开adjustResize模式时，键盘弹出来会把按钮顶到键盘上面，而不是像按钮放组件内部那样被隐藏，给你几个实用的解决办法：

方法一：用组件内置属性实现固定底部 #

直接把按钮放到KeyboardAwareScrollView内部，用它的stickyFooterComponent属性，既能让按钮固定在底部，键盘弹出时也会自动隐藏，完美贴合需求：

import KeyboardAwareScrollView from 'react-native-keyboard-aware-scroll-view';

// 页面组件里的渲染代码
<KeyboardAwareScrollView
  enableOnAndroid={true}
  stickyFooterComponent={() => (
    <View style={{ padding: 16, backgroundColor: '#fff', borderTopWidth: 1, borderTopColor: '#eee' }}>
      <Button title="提交表单" onPress={handleSubmit} />
    </View>
  )}
>
  {/* 这里放页面的其他内容，比如表单输入框、文本等 */}
  <View style={{ height: 1200, padding: 16 }}>
    {/* 示例输入框 */}
    <TextInput style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 16 }} placeholder="输入内容" />
  </View>
</KeyboardAwareScrollView>

方法二：手动监听键盘状态控制按钮显示 #

要是必须把按钮放在组件外面，就用React Native自带的Keyboard模块监听键盘的弹出和收起，动态控制按钮是否显示：

1. 先导入需要的模块：

import { Keyboard, View, Button, TextInput } from 'react-native';
import { useState, useEffect } from 'react';
import KeyboardAwareScrollView from 'react-native-keyboard-aware-scroll-view';

2. 在组件里添加状态和监听逻辑：

const [keyboardIsShow, setKeyboardIsShow] = useState(false);

useEffect(() => {
  // 监听键盘弹出
  const showListener = Keyboard.addListener('keyboardDidShow', () => {
    setKeyboardIsShow(true);
  });
  // 监听键盘收起
  const hideListener = Keyboard.addListener('keyboardDidHide', () => {
    setKeyboardIsShow(false);
  });

  // 组件卸载时移除监听
  return () => {
    showListener.remove();
    hideListener.remove();
  };
}, []);

3. 最后渲染页面和按钮：

<>
  <KeyboardAwareScrollView enableOnAndroid={true} style={{ flex: 1 }}>
    {/* 页面内容区域 */}
    <View style={{ height: 1200, padding: 16 }}>
      <TextInput style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 16 }} placeholder="输入内容" />
    </View>
  </KeyboardAwareScrollView>
  {/* 键盘隐藏时才显示按钮 */}
  {!keyboardIsShow && (
    <View style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 16, backgroundColor: '#fff', borderTopWidth: 1, borderTopColor: '#eee' }}>
      <Button title="提交表单" onPress={handleSubmit} />
    </View>
  )}
</>

方法三：调整Android的软输入模式 #

如果上面的方法都不合适，可以试试修改Android项目里的AndroidManifest.xml文件，把android:windowSoftInputMode改成adjustPan，不过这个模式会让整个页面上移，可能影响其他元素的布局，得根据自己的页面情况权衡：

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

内容的提问来源于stack exchange，提问作者Quần Đỗ Minh