3
votes

La saisie dans le chat natif de React est couverte par le clavier

Je rencontre un problème avec la version Android.

J'utilise le chat doué pour mon chat d'application. Mais la saisie de texte est couverte par le clavier, je ne peux donc pas voir ce que je saisis.

J'utilise la version 0.51 de React-native. J'ai déjà suivi des couples de solutions mais cela ne fonctionne toujours pas.

J'ai essayé cette solution qui utilise keyboardAvoidingView et j'ai également ajouté KeyboardSpacer et son ne fonctionne pas non plus.

Tout conseil serait très bien.

Voici mon code de composant de rendu

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

reactjs keyboard native chat

2 commentaires

avez-vous essayé de définir la valeur keyboardVerticalOffset?

Oui je l'ai fait, mais cela ne fonctionne toujours pas :(

4 Réponses :

-1
votes

Veuillez ajouter le style suivant:

paddingHorizontal: 20,

2 commentaires

Où dois-je mettre le style? dans View ou dans le composant GiftedChat?

Je suppose à ton texte

11
votes

Il semble que ce soit un problème courant avec React Native Gifted Chat et Expo sur les appareils Android.

Vous pouvez utiliser le package react-native-keyboard-spacer pour garder le contenu visible après l'ouverture le clavier:

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

0 commentaires

2
votes

J'ai également le même problème. Je l'ai résolu en ajoutant android: windowSoftInputMode = "AdjustResize" dans le fichier AndroidManifest.xml comme ci-dessous:

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

0 commentaires

0
votes

Et ceci:

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>;

0 commentaires