5
votes

Meilleur ordre pour KeyboardAvoidingView, SafeAreaView et ScrollView

J'utilise react native pour créer une application mobile. Je gère la position du clavier sur mes écrans en utilisant KeyboardAvoidingView, SafeAreaView et ScrollView. J'utilise cet ordre pour gérer la position du clavier:

<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding" enabled>
        <SafeAreaView>
          <ScrollView>
            <Header
              leftComponent={{
                icon: "cancel",
                color: "#fff",
                size: 30,
                onPress: () => navigate("Dashboard")
              }}
              centerComponent={{ text: "Ajouter une demande", style: { color: "#fff", fontSize: 18 } }}
              rightComponent={{
                icon: "help",
                color: "#fff",
                size: 30,
                fontWeight: "bold",
                onPress: () => Alert.alert("En cours de dÃ©veloppement")
              }}
              backgroundColor="rgba(82, 159, 197, 1)"
              // outerContainerStyles={{ height: Platform.OS === "ios" ? 70 : 70 - 24 }}
              containerStyle={
                {
                  // marginTop: Platform.OS === "ios" ? 0 : 15
                }
              }
            />
            <View>
              <Input placeholder="INPUT WITH CUSTOM ICON" leftIcon={<Icon name="user" size={24} color="black" />} />
            </View>
          </ScrollView>
        </SafeAreaView>
      </KeyboardAvoidingView>

Ma question est la suivante: quel est le meilleur ordre pour utiliser ces 3 composants pour éviter une meilleure position du clavier

react-native keyboard scroll safeareaview

0 commentaires

3 Réponses :

5
votes

SafeAreaView fonctionne uniquement avec iOS . Par conséquent, il est supposé que vous utilisez iOS . Si votre projet est iOS , vous pouvez utiliser KeyboardAwareScrollView .

SafeAreaView doit être en haut car il couvre la zone de l'écran.

Exemple de KeyboardAwareScrollView

Usage

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
...
<SafeAreaView>
<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>
</SafeAreaView>

2 commentaires

Bonjour, vous recommandez d'utiliser cette librairie à la place du composant natif KeyboardAvoidingView?

Oui, @KhaledSi vous créez le projet iOS, vous pouvez travailler beaucoup plus confortablement.

0
votes

Voici une autre solution sans avoir besoin d'une bibliothèque externe telle que react-native-keyboard-aware-scroll-view .

J'ai créé un composant ScreenWrapper pour gérer le problème des ScreenWrapper :

import React, { ReactElement } from 'react';
import {
  KeyboardAvoidingView, Platform,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

const ScreenWrapper = ({ children }: Props): ReactElement => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {
        Platform.OS === 'ios'
          ? (
            <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
              {children}
            </KeyboardAvoidingView>
          )
          : (
            <>
              {children}
            </>
          )
      }
    </SafeAreaView>
  );
};

export default ScreenWrapper;

Comme Android cherche à rendre les choses grandement sans le KeyboardAvoidingView , j'ai décidé de l'utiliser uniquement pour les E / S, c'est plus simple à gérer.

J'utilise le padding car il correspond à mon besoin, mais vous voudrez peut-être le changer.

Je recommande de lire cet excellent article de blog pour plus d'informations. J'ai créé ce wrapper grâce à lui.

0 commentaires

0
votes

Voici un exemple de composant réutilisable sans bibliothèque et comprend KeyboardAvoidingView, SafeAreaView et ScrollView. Cela permet également d'étendre la vue de défilement à sa pleine hauteur.

import { KeyboardAvoidingView, SafeAreaView, ScrollView } from 'react-native';
import React from 'react';

const ScreenContainer = props => {
  const { children } = props;
  return (
    <SafeAreaView style={ { flex: 1 } }>
      <KeyboardAvoidingView
        behavior={ Platform.OS === 'ios' ? 'padding' : 'height' }
        style={ { flex: 1 } }
      >
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          keyboardShouldPersistTaps="handled"
        >
          { children }
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

export default ScreenContainer;

0 commentaires