React Native中如何让提交按钮显示在弹出的键盘上方？

直接给你几个靠谱的实现方案，根据项目情况选就行：

方案一：用React Native内置的KeyboardAvoidingView #

这是官方专门处理键盘遮挡问题的组件，适配iOS和Android：

import { View, TextInput, TouchableOpacity, KeyboardAvoidingView, Platform, Text } from 'react-native';

export default function YourScreen() {
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={Platform.OS === 'ios' ? 60 : 0} // 数值根据导航栏高度调整，避免布局错位
    >
      {/* 顶部内容区，包含输入框 */}
      <View style={{ flex: 1, padding: 16 }}>
        <TextInput
          placeholder="输入内容"
          style={{ borderWidth: 1, borderColor: '#ccc', padding: 12, borderRadius: 8 }}
        />
      </View>

      {/* 底部按钮区 */}
      <View style={{ padding: 16, borderTopWidth: 1, borderTopColor: '#eee' }}>
        <TouchableOpacity style={{ backgroundColor: '#007AFF', padding: 14, borderRadius: 8 }}>
          <Text style={{ color: 'white', textAlign: 'center', fontSize: 16 }}>提交</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
}

原理很直观：KeyboardAvoidingView会自动检测键盘高度，调整自身布局让底部按钮跟着键盘上移，behavior属性是适配不同平台的策略，iOS用padding、Android用height效果更稳定。

方案二：监听键盘事件动态调整样式 #

如果内置组件满足不了需求，直接监听键盘的显示/隐藏事件，手动控制按钮位置：

import { useState, useEffect } from 'react';
import { View, TextInput, TouchableOpacity, Keyboard, Dimensions, Text } from 'react-native';

const { height: screenHeight } = Dimensions.get('window');

export default function YourScreen() {
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  useEffect(() => {
    // 监听键盘弹出
    const showListener = Keyboard.addListener('keyboardDidShow', (e) => {
      setKeyboardHeight(e.endCoordinates.height);
    });
    // 监听键盘收起
    const hideListener = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardHeight(0);
    });

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

  return (
    <View style={{ flex: 1 }}>
      {/* 顶部内容区 */}
      <View style={{ flex: 1, padding: 16 }}>
        <TextInput
          placeholder="输入内容"
          style={{ borderWidth: 1, borderColor: '#ccc', padding: 12, borderRadius: 8 }}
        />
      </View>

      {/* 动态调整位置的按钮区 */}
      <View 
        style={{ 
          position: 'absolute',
          left: 0,
          right: 0,
          bottom: keyboardHeight,
          padding: 16,
          borderTopWidth: 1,
          borderTopColor: '#eee',
          backgroundColor: 'white' // 加背景色避免被下方内容穿透
        }}
      >
        <TouchableOpacity style={{ backgroundColor: '#007AFF', padding: 14, borderRadius: 8 }}>
          <Text style={{ color: 'white', textAlign: 'center', fontSize: 16 }}>提交</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

这个方案灵活性更高，你可以根据键盘高度自定义按钮偏移量，记得给按钮容器加背景色，不然键盘弹出时会看到下方内容透上来。

方案三：用第三方库react-native-keyboard-aware-scroll-view #

嫌自己写麻烦的话，直接用现成的第三方库，封装得更完善：

首先安装库：

npm install react-native-keyboard-aware-scroll-view --save
# 或用yarn
yarn add react-native-keyboard-aware-scroll-view

然后使用：

import { View, TextInput, TouchableOpacity, Text } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

export default function YourScreen() {
  return (
    <KeyboardAwareScrollView
      style={{ flex: 1 }}
      enableOnAndroid={true} // 开启Android支持
      keyboardShouldPersistTaps="handled" // 点击输入框外区域时收起键盘
    >
      {/* 顶部内容区 */}
      <View style={{ flex: 1, padding: 16 }}>
        <TextInput
          placeholder="输入内容"
          style={{ borderWidth: 1, borderColor: '#ccc', padding: 12, borderRadius: 8 }}
        />
      </View>

      {/* 底部按钮区 */}
      <View style={{ padding: 16, borderTopWidth: 1, borderTopColor: '#eee' }}>
        <TouchableOpacity style={{ backgroundColor: '#007AFF', padding: 14, borderRadius: 8 }}>
          <Text style={{ color: 'white', textAlign: 'center', fontSize: 16 }}>提交</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAwareScrollView>
  );
}

这个库会自动处理键盘的各种场景，滚动、偏移都帮你做好了，适合快速开发。

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