Как заставить Inputbox появляться над клавиатурой в IOS?

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

Другое предложение будет выглядеть следующим образом:

React-Native-Keyboard-Aware-Scroll-View

Это замечательно, если у вас есть несколько текстовых вводов и обрабатывает некоторыеанимация.Не идеально, но сделал работу для меня.

Answer 2

Один из способов - изменить позицию ввода, когда клавиатура отображается и скрывается.Вам нужно добавить двух слушателей, когда клавиатура показывает и скрывает:

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}} />
    )
}

Вы также можете добавить анимацию, чтобы она плавно двигалась.