React Native Gifted Chat中的输入框被键盘遮挡

Question

我在使用Android版本时遇到了问题。

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

我使用的是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>
)}

- Mirsa

---

你尝试设置keyboardVerticalOffset值了吗？ - Waheed Akhtar

是的，我试过了，但还是不起作用 :( - Mirsa

Answer 1

看起来React Native Gifted Chat和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>   
    )
  }
}

- Agu Dondo

Answer 2

我也遇到了同样的问题。我通过在 AndroidManifest.xml 文件中添加 android:windowSoftInputMode="adjustResize" 来解决它，如下所示：

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  ...
  ...
  >
  <activity
    android:name=".MainActivity"
    ...
    ...
    android:windowSoftInputMode="adjustResize" <!-- add here -->
  >
    ...
  </activity>
  ...
</application>

- Kishan Bharda

Answer 3

这个怎么样：

import { KeyboardAvoidingView } from 'react-native';

<View style={{ flex: 1 }}>
  <GiftedChat
    messages={this.state.messages}
    onSend={messages => this.onSend(messages)}
    user={{
      _id: 1,
    }}
  />
  {Platform.OS === 'android' && <KeyboardAvoidingView behavior="padding" />}
</View>;

- J.Doe.Doe