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

Pour Android, vous pouvez définir android: windowSoftInputMode = "AdjustResize" pour Activité dans le fichier AndroidManifest , ainsi lorsque le clavier s'affiche, votre écran se redimensionnera et si vous mettez le TextInput au bas de votre écran, il sera conservé au-dessus du clavier

Donnez une position à votre TextInput: style absolu et changez sa position en utilisant la hauteur renvoyée par les événements keyboardDidShow et keyboardDidHide.

Voici une modification de l'exemple de clavier de la documentation de React Native pour démonstration:

import React, { Component } from 'react';
import { Keyboard, TextInput } from 'react-native';

class Example extends Component {
    state = {
        keyboardOffset: 0,
    };

    componentDidMount() {
        this.keyboardDidShowListener = Keyboard.addListener(
            'keyboardDidShow',
            this._keyboardDidShow,
        );
        this.keyboardDidHideListener = Keyboard.addListener(
            'keyboardDidHide',
            this._keyboardDidHide,
        );
    }

    componentWillUnmount() {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }

    _keyboardDidShow(event) {
        this.setState({
            keyboardOffset: event.endCoordinates.height,
        })
    }

    _keyboardDidHide() {
        this.setState({
            keyboardOffset: 0,
        })
    }

    render() {
        return <View style={{flex: 1}}>
            <TextInput
                style={{
                    position: 'absolute',
                    width:    '100%',
                    bottom:   this.state.keyboardOffset,
                }}
                onSubmitEditing={Keyboard.dismiss}
            />
        </View>;
    }
}

react-native-keyboard-aware-scroll-view a causé un problème similaire dans iOS. C'est là que je suis tombé sur react-native-keyboard-aware-view a>. 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>

vous pouvez utiliser KeyboardAvoidingView comme suit

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

Problème Android avec affichage de défilement compatible avec le clavier

Je ne sais vraiment pas pourquoi vous devez ajouter

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

pour que KeyboardawareScrollview fonctionne

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

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 peaufiné KeyboardAvoidingView. J'ai publié ma solution sur npm, veuillez essayer et donner moi un retour! Démo sur iOS

Exemple d'extrait de code

p >

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;

Version Hooks:

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();
  };
}, []);

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

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

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

Donnez simplement le style de vue parent comme ceci:

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

Et cela fonctionnerait! 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.

Le meilleur et le plus simple est d'utiliser la vue par défilement, cela prendra automatiquement le contenu vers le haut et TextInput ne sera pas masqué, peut se référer au code ci-dessous

  <ScrollView style={styles.container}>
  <View>
    <View style={styles.commonView}>
      <Image source={firstNameIcon} style={{width: 25, height: 25}}></Image>
      <Text style={styles.commonTxt}>First Name</Text>
    </View>

    <TextInput
      onFocus={() => onFocus('firstName')}
      placeholder="First Name"
      style={styles.txtInput}
      onChangeText={(text) => onChangeText(text, 'firstName')}
      value={firstNameValue}
    />
  </View>
  <View>
    <View style={styles.commonView}>
      <Image source={LastNameIcon} style={{width: 25, height: 25}}></Image>
      <Text style={styles.commonTxt}>Last Name</Text>
    </View>

    <TextInput
      onFocus={() => onFocus('lastName')}
      placeholder="Last Name"
      style={styles.txtInput}
      onChangeText={(text) => onChangeText(text, 'lastName')}
      value={lastNameValue}
    />
  </View>
  <View>
    <View style={styles.commonView}>
      <Image source={callIcon} style={{width: 25, height: 25}}></Image>
      <Text style={styles.commonTxt}>Number</Text>
    </View>

    <TextInput
      onFocus={() => onFocus('number')}
      placeholder="Number"
      style={styles.txtInput}
      onChangeText={(text) => onChangeText(text, 'number')}
      value={numberValue}
    />
  </View>
  <View>
    <View style={styles.commonView}>
      <Image source={emailIcon} style={{width: 25, height: 25}}></Image>
      <Text style={styles.commonTxt}>Email</Text>
    </View>

    <TextInput
      onFocus={() => onFocus('email')}
      placeholder="Email"
      style={styles.txtInput}
      onChangeText={(text) => onChangeText(text, 'email')}
      value={emailValue}
    />
  </View>

  <View style={styles.viewSavebtn}>
    <TouchableOpacity style={styles.btn}>
      <Text style={styles.saveTxt}>Save</Text>
    </TouchableOpacity>
  </View>
</ScrollView>

Je sais que cela peut sembler une idée stupide, mais mon problème de clavier a été résolu avec ScrollView.

<View style={{flex:1, height:"100%"}}>
        <ScrollView showsVerticalScrollIndicator={false}>
          <Text>Username</Text>
        <TextInput
          style={styles.TextInput}
          underlineColorAndroid="transparent"
          autoCapitalize="none"
          type="email"
          value={userName}
          onChangeText={(userName) => this.setState({ userName })}
        />
        <Text style={styles.textInputHeader}>Password</Text>
        <TextInput
          style={styles.TextInput}
          secureTextEntry={true}
          underlineColorAndroid="transparent"
          autoCapitalize="none"
          value={password}
          onChangeText={(password) => this.setState({ password })}
        />
        <TouchableOpacity>
          <Text>
            Forgot Password?
          </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.checkInput}>
          <Text>LOGIN</Text>
        </TouchableOpacity>
        <Text onPress={() => this.props.navigation.navigate("SignupScreen")}>Don't have an account? Sign up</Text>
        </ScrollView>
      </View>  
  </View>

allez dans votre application Android> src> main> AndroidManifest.xml écrivez ces 2 lignes:

android: launchMode = "singleTop" android: windowSoftInputMode = "AdjustPan" entrez la description de l'image ici