IOS如何让Inputbox出现在键盘上方？

Question

我正在尝试创建一个简单且标准的聊天 window 就像 WhatsApp、Telegram 等一样。当屏幕底部的输入框获得焦点时，键盘出现并且输入框正确这样的键盘...

这是我的代码...

import React from 'react'
import {Actions} from 'react-native-router-flux'
import {ScrollView, View, TextInput, Text} from 'react-native'

import style from './style'

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

    render() {
       return (
           <View  style={{flex:1}}>
              <ScrollView>
                  <View style={{flex: 1}}>
                      <Text>Hello !</Text>
                  </View>
              </ScrollView>
              <View style={{borderWidth: 1, padding:15}}>
                  <TextInput/>
              </View>
           </View>
       )
    }
}

export default Chat

结果很简单：

但是当我的输入框获得焦点时，输入框仍然卡在屏幕底部，键盘后面。对此有何建议？

Answer 1

一种方法是在键盘显示和隐藏时更改输入的位置。您需要为键盘显示和隐藏添加两个监听器：

import { Keyboard } from 'react-native';

constructor(props) {
    super(props);
    this.state = {
        keyboardHeight: 0,
        inputHeight: 40
    }
}

componentDidMount() {
    Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
}

_keyboardDidShow(e) {
    this.setState({keyboardHeight: e.endCoordinates.height});
}

_keyboardDidHide(e) { 
     this.setState({keyboardHeight: 0});
}

render() {
    return (
        <TextInput style={{marginBottom: keyboardHeight + inputHeight}} />
    )
}

您还可以添加一些动画，使其移动流畅。

Answer 2

另一个建议是：

React-Native-Keyboard-Aware-Scroll-View

当您有多个文本输入并处理一些动画时，这非常有用。不完美，但为我完成了工作。

IOS如何让Inputbox出现在键盘上方？

How to make Inputbox appear above the keyboard in IOS?

ios

react-native

react-native-ios