iOS端React Native实现输入框悬浮于键盘上方的方法

我之前也碰到过完全一样的问题！在React Native里，默认布局不会自动适配键盘弹出的情况，咱们可以直接用官方提供的KeyboardAvoidingView组件来搞定，它会自动根据键盘的位置调整子组件布局，让输入框稳稳悬浮在键盘上方。

下面是修改后的完整代码，我标注了关键改动点：

import React from 'react'
import {Actions} from 'react-native-router-flux'
// 1. 导入KeyboardAvoidingView和Platform组件
import {ScrollView, View, TextInput, Text, KeyboardAvoidingView, Platform} from 'react-native'
import style from './style'

class Chat extends React.Component {
  componentDidMount() {
    Actions.refresh({title: 'Chat'})
  }

  render() {
    return (
      // 2. 用KeyboardAvoidingView替换最外层的View
      <KeyboardAvoidingView 
        style={{flex:1}}
        // 根据平台设置behavior：iOS用padding更顺滑，Android用height/position都可
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        // 如果页面有导航栏，可设置此属性补偿导航栏高度，比如导航栏高60：
        // keyboardVerticalOffset={60}
      >
        <ScrollView style={{flex:1}}>
          <View style={{padding: 20}}>
            <Text>Hello !</Text>
            {/* 多加点测试文本，方便验证键盘弹出时的滚动效果 */}
            <Text>测试消息1</Text>
            <Text>测试消息2</Text>
            <Text>测试消息3</Text>
            <Text>测试消息4</Text>
            <Text>测试消息5</Text>
            <Text>测试消息6</Text>
            <Text>测试消息7</Text>
            <Text>测试消息8</Text>
            <Text>测试消息9</Text>
            <Text>测试消息10</Text>
          </View>
        </ScrollView>
        <View style={{borderWidth: 1, padding:15}}>
          <TextInput placeholder="输入消息..." />
        </View>
      </KeyboardAvoidingView>
    )
  }
}

export default Chat

额外注意事项： #

• behavior属性：不同平台适配逻辑有差异，iOS用padding的过渡效果更自然，Android用height或position都能生效，用Platform.OS区分是最优写法。
• keyboardVerticalOffset：如果你的页面带有导航栏（比如react-native-router-flux的导航栏），需要设置这个属性来抵消导航栏的高度，否则输入框可能会被推得过高。
• ScrollView布局：确保ScrollView设置了flex:1占满剩余空间，这样键盘弹出时，聊天内容区域能正常滚动展示历史消息。

要是这个方案还不生效，也可以尝试手动监听键盘的弹出/收起事件来调整输入框位置，但KeyboardAvoidingView已经能覆盖绝大多数场景，是官方推荐的首选方案。

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