时间戳

首页 > 解决方案 > react native 天才聊天中的输入被键盘覆盖

reactjs - react native 天才聊天中的输入被键盘覆盖

问题描述

我遇到了Android版本的问题。

我正在为我的应用程序聊天使用天才聊天。但是文本输入被键盘覆盖，所以我看不到我在输入什么。

我正在使用 react-native 版本 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>
)}

标签： reactjskeyboardchatnative

解决方案

看起来这是 Android 设备上 React Native Gifted Chat 和 Expo 的常见问题。

您可以使用该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>   
    )
  }
}

推荐阅读