Ввод в реакцию родного одаренного чата прикрыт клавиатурой

Question

У меня проблема с версией Android.

Я использую одаренный чат для своего приложения чата.Но ввод текста покрыт клавиатурой, поэтому я не вижу, что набираю.

Я использую реагирующую версию 0.51.Я уже следовал парам решений, но это все еще не работает.

Я попробовал это решение , которое использует keyboardAvoidingView, а также добавило KeyboardSpacer, но оно также не работает.

Любой совет был бы очень хорош.

Вот мой код компонента рендеринга

render() {
console.log(this.state);
return (
  <View style={{flex: 1}}>
    <GiftedChat
      messages={this.state.messages}
      onSend={Fire.shared.send}
      loadEarlier={this.state.loadEarlier}
      isLoadingEarlier={this.state.isLoadingEarlier}

      user={{
        name: this.props.profile.name,
        _id: this.props.profile.user_id,
        avatar: this.props.profile.profile_image
      }}

      renderUsernameOnMessage={true}
      renderActions={this.renderCustomActions}
      renderAvatar={this.renderAvatar}
      renderBubble={this.renderBubble}
      renderSend={this.renderSend}
      renderSystemMessage={this.renderSystemMessage}
      renderCustomView={this.renderCustomView}
      renderFooter={this.renderFooter}
      keyboardShouldPersistTaps={'always'}
    />
    <KeyboardSpacer/>
  </View>
)}

Answer 1

Похоже, что это обычная проблема с React Native Gifted Chat and Expo на устройствах Android.

Вы можете использовать пакет react-native-keyboard-spacer, чтобы содержимое отображалось после открытия клавиатуры:

import React, { Component } from 'react';
import { View, Platform } from 'react-native';
import KeyboardSpacer from 'react-native-keyboard-spacer';
import { GiftedChat } from 'react-native-gifted-chat';

export default class Chat extends Component {
  render() {
    const giftedChatMessages = [
      ...
    ];
    return (
      <View style={{flex: 1}}>
        <GiftedChat
          messages={giftedChatMessages}
          onSend={newMessages => onSend(newMessages[0].text)}
          user={{
              _id: 1,
          }}
          renderAvatar={() => null}
        />
        {Platform.OS === 'android' ? <KeyboardSpacer /> : null }
      </View>   
    )
  }
}

Answer 2

Пожалуйста, добавьте следующий стиль:

paddingHorizontal: 20,