web-dev-qa-db-fra.com

Comment définir la zone de saisie de texte au-dessus du clavier tout en entrant le champ de saisie dans React Native

J'utilise le composant TextInput natif réactif. Ici, je dois montrer la InputBox au-dessus du clavier si l'utilisateur clique sur le champ textInput.

J'ai essayé ci-dessous mais je suis confronté aux problèmes

1. Clavier évitant la vue 

 a. Here it shows some empty space below the input box 
 b. Manually I need to scroll up the screen to see the input field which I was given in the text field
 c. Input box section is hiding while placing the mouse inside the input box

2. react-native-Keyboard-aware-scroll-view 

a.It shows some empty space below the input box
b.ScrollView is reset to the top of the page after I moving to the next input box

Ici, je définis la vue de défilement du clavier à l'intérieur du composant ScrollView

Veuillez clarifier

Mon exemple de code est

<SafeAreaView>
<KeyboardAvoidingView>
<ScrollView>        
        <Text>Name</Text>
            <AutoTags
            //required
             suggestions={this.state.suggestedName}
             handleAddition={this.handleAddition}
             handleDelete={this.handleDelete}
             multiline={true}
             placeholder="TYPE IN"
             blurOnSubmit={true}
             style= {styles.style}
             />
</ScrollView>   
</KeyboardAvoidingView>
</SafeAreaView>

[ https://github.com/APSL/react-native-keyboard-aware-scroll-view]

react-nativetextboxkeyboard-eventstextinput
5
sejn

vous pouvez utiliser KeyboardAvoidingView comme suit

if (Platform.OS === 'ios') {
        return <KeyboardAvoidingView behavior="padding">
            {this.renderChatInputSection()}
        </KeyboardAvoidingView>
    } else {
        return this.renderChatInputSection()
    }

Où this.renderChatInputSection() renverra la vue comme textinput pour taper un message. J'espère que ceci vous aidera.

1
Maneesh

J'ai basé ma solution de solution @basbase.

Mon problème avec sa solution qui fait que le TextInput saute sans aucun égard pour ma vue d'ensemble.

Ce n'était pas ce que je voulais dans mon cas, alors j'ai fait ce qu'il a suggéré mais avec une petite modification

Donnez simplement le style de vue parent comme ceci:

 <View 
             style={{
              flex: 1,
              bottom:   keyboardOffset,
          }}>

Et ça marcherait! le seul problème est que si le clavier est ouvert et que vous faites défiler vers le bas, vous verrez le remplissage vierge supplémentaire à la fin de l'écran.

0
RowanX

J'ai rencontré le même problème lorsque je travaillais sur mon projet parallèle, et je l'ai résolu après avoir quelque peu modifié KeyboardAvoidingView. J'ai publié ma solution à npm, essayez-le et donnez-moi un commentaire! Démo sur iOS

Exemple d'extrait

import React from 'react';
import { StyleSheet, TextInput } from 'react-native';
import KeyboardStickyView from 'rn-keyboard-sticky-view';

const KeyboardInput = (props) => {
  const [value, setValue] = React.useState('');

  return (
    <KeyboardStickyView style={styles.keyboardView}>
      <TextInput
        value={value}
        onChangeText={setValue}
        onSubmitEditing={() => alert(value)}
        placeholder="Write something..."
        style={styles.input}
      />
    </KeyboardStickyView>
  );
}

const styles = StyleSheet.create({
  keyboardView: { ... },
  input: { ... }
});

export default KeyboardInput;
0
Js. Lim

Pour Android vous pouvez définir Android:windowSoftInputMode="adjustResize" pour Activity dans le fichier AndroidManifest, donc lorsque le clavier s'affiche, votre écran redimensionnera la taille et si vous placez le TextInput en bas de votre écran, il sera conservé au-dessus du clavier

0
SiSa

Version crochets:

const [keyboardOffset, setKeyboardOffset] = useState(0);
const onKeyboardShow = event => setKeyboardOffset(event.endCoordinates.height);
const onKeyboardHide = () => setKeyboardOffset(0);
const keyboardDidShowListener = useRef();
const keyboardDidHideListener = useRef();

useEffect(() => {
  keyboardDidShowListener.current = Keyboard.addListener('keyboardWillShow', onKeyboardShow);
  keyboardDidHideListener.current = Keyboard.addListener('keyboardWillHide', onKeyboardHide);

  return () => {
    keyboardDidShowListener.current.remove();
    keyboardDidHideListener.current.remove();
  };
}, []);
0
Teodor Ciuraru

Vous trouverez certainement cela utile

Vue de défilement compatible avec le clavier Android

Je ne sais vraiment pas pourquoi tu dois ajouter

"androidStatusBar": {"backgroundColor": "# 000000"}

pour que KeyboardawareScrollview fonctionne

Remarque: n'oubliez pas de redémarrer le projet sans la dernière étape, il pourrait ne pas fonctionner, profitez-en!

0
Frankrnz

react-native-keyboard-aware-scroll-view a provoqué un problème similaire dans ios. C'est à ce moment que je suis tombé sur react-native-keyboard-aware-view . Les extraits sont à peu près les mêmes.

    <KeyboardAwareView animated={true}>
        <View style={{flex: 1}}>
          <ScrollView style={{flex: 1}}>
              <Text style={{fontSize: 20, color: '#FFFFFF'}}>A</Text>
              <Text style={{fontSize: 20, color: '#FFFFFF'}}>B</Text>
              <Text style={{fontSize: 20, color: '#FFFFFF'}}>C</Text>
              <Text style={{fontSize: 20, color: '#FFFFFF'}}>D</Text>
          </ScrollView>
        </View>
        <TouchableOpacity style={{height: 50, backgroundColor: 'transparent', alignItems: 'center', justifyContent: 'center', alignSelf: 'stretch'}}>
          <Text style={{fontSize: 20, color: '#FFFFFF'}}>Submit</Text>
        </TouchableOpacity>
      </KeyboardAwareView>

J'espère qu'il vous aidera

0
HGK