Question

我正在尝试创建一个简单而标准的聊天窗口，就像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的键盘上方？

2 个答案: