impossible de faire défiler dans scrollView

Question

J'ai un écran où je tape dans le champ de saisie et j'obtiens les résultats de la recherche en conséquence. La liste est rendue dans un ScrollView mais elle ne me permet toujours pas de faire défiler lorsque le clavier est ouvert (sous Android).

Comment puis-je réparer cela?

  return (
    <>
      {addressesFound.length > 0 ? (
        <ScrollView
          style={styles.searchResultsContainer}
          keyboardShouldPersistTaps={'always'}
          keyboardDismissMode={'on-drag'}>
          {addressesFound.map((addressDetails: addressDetailsType) => {
            return (
              <View
                key={addressDetails.placeName}
                style={styles.resultContainer}>
                <Text
                  style={styles.text}>
                  {addressDetails.placeName}
                </Text>
              </View>
            );
          })}
        </ScrollView>
      ) : null}
    </>
  );
};
const styles = StyleSheet.create({
  searchResultsContainer: {
    width: moderateScale(400),
    paddingHorizontal: moderateScale(50),
    paddingRight: moderateScale(65),
    marginTop: moderateScale(10),
   flex:1,
  },
  resultContainer: {
    marginTop: moderateScale(10),
    borderBottomWidth: 1,
    borderBottomColor: 'grey',
  },
  text: {
    fontSize: moderateScale(15),
  },
});

J'ai déjà essayé d'ajouter nestedScrollEnabled = {true} mais cela ne fait aucune différence.

C'est là que le composant mentionné ci-dessus est appelé:

        <View style={styles.dropdown}>
          <LocationsFound
            addressesFound={locations.addressesFoundList} />
....
  dropdown: {
    position: 'absolute',
    top: moderateScale(215),
    zIndex: moderateScale(10),
    backgroundColor: '#fff',
    flex: 1,
  },

J'ai essayé d'ajouter de la hauteur: 80% à dropdown. Cela permet de faire défiler un peu. Cependant, lorsque le clavier est ouvert, je peux faire défiler mais pas jusqu'à la fin. Si j'ajoute de la hauteur: 100%, je ne peux pas du tout faire défiler.

Answer 1

J'ai fait une collation d'exposition pour votre problème et l'ai examiné. Je pense que je l'ai résolu. jetez un coup d'oeil:

C'est le lien vers la collation expo

Pour le décrire:

Comme je l'ai découvert, votre problème était que la ScrollViewhauteur ne changeait dans aucune situation, même en donnant plus heightou en donnant paddingBottom.

alors j'ai enveloppé le ScrollViewdans une Viewétiquette et lui ai donné ce style:

scrollViewWrapper: {
     width: '100%',
     minHeight: '100%',
     paddingBottom: 1.3*keyboardHeight
 }

Dans ce style, vous voyez un paramètre keyboardHeight, qui est un paramètre stateque je définis dans le componentDidMountavec les codes ci-dessous:

import {Keyboard} from 'react-native';
 
state = {
  keyboardHeight: 0,
}

componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener(
  'keyboardDidShow',
  this._keyboardDidShow
);
this.keyboardDidHideListener = Keyboard.addListener(
  'keyboardDidHide',
  this._keyboardDidHide
 );
}
_keyboardDidShow = (e) => {
  this.setState({
    keyboardHeight: e.endCoordinates.height,
  });
};

Je dois mentionner que vous ne pouvez pas déplacer le style de l' paddingBottom: 1.3*keyboardHeightextérieur du composant de classe et le placer dans l' stylesobjet, car le keyboardHeightest un state, il peut être connu juste à l'intérieur du composant.

Je vous suggère de jeter un œil à mon code dans expo snack pour mieux comprendre mes descriptions.

J'espère que cela résoudra votre problème.

Modifier pour les composants fonctionnels

utilisez le code ci-dessous pour détecter la hauteur du clavier lors de l'écriture des composants fonctionnels:

const [keyboardHeight, setKeyboardHeight] = useState(0)
const [scrollViewVisibility, setScrollViewVisibility] = useState(false)
useEffect(() => {
  Keyboard.addListener("keyboardDidShow", _keyboardDidShow);

  // cleanup function
  return () => {
    Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
  };
}, []);
const _keyboardDidShow = (e) => {
  console.log("============in keyboardDidShow")
  setKeyboardHeight(e.endCoordinates.height)
};

J'ai aussi édité le goûter de l' expo . vous pouvez y jeter un œil pour voir un exemple fonctionnel.

Answer 2

Je peux penser à trois solutions (vous pouvez essayer l'une ou l'autre):

1-Essayez d'encapsuler la vue de défilement dans une balise de vue avec flex = 1, comme ceci:

<View style={{ flex:1 }}>
<ScrollView>
</ScrollView>
</View>

2-si vous ne souhaitez pas utiliser de vue, vous pouvez définir ScrollView flex sur 1

Première solution 3-in, vous pouvez utiliser une balise vide au lieu de View comme ceci:

<> 
</>

Answer 3

Si votre problème concerne uniquement le clavier ouvert, vous voudrez peut-être jeter un œil à KeyboardAvoidingView

J'ai eu beaucoup de problèmes avec ça! Vous souhaitez essayer tous les paramètres de l'accessoire behavior. il y en a probablement un qui fonctionne pour vous!

D'après leurs exemples:

import React from 'react';
import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform, 
TouchableWithoutFeedback, Button, Keyboard  } from 'react-native';

const KeyboardAvoidingComponent = () => {
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS == "ios" ? "padding" : "height"}
       style={styles.container}
     >
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <View style={styles.inner}>
           <Text style={styles.header}>Header</Text>
           <TextInput placeholder="Username" style={styles.textInput} />
           <View style={styles.btnContainer}>
             <Button title="Submit" onPress={() => null} />
           </View>
         </View>
       </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
   );
 };

 const styles = StyleSheet.create({
   container: {
     flex: 1
   },
   inner: {
     padding: 24,
     flex: 1,
     justifyContent: "space-around"
   },
   header: {
     fontSize: 36,
     marginBottom: 48
   },
   textInput: {
     height: 40,
     borderColor: "#000000",
     borderBottomWidth: 1,
     marginBottom: 36
   },
   btnContainer: {
     backgroundColor: "white",
     marginTop: 12
   }
 });

 export default KeyboardAvoidingComponent;

Answer 4

Je pense que si votre contenu ScrollView est plus petit que l'écran, il ne défilera pas. Vous pouvez donc essayer de créer une hauteur: "150%" ou quelque chose comme ça ou ajouter une vue vide avec une hauteur pour étirer votre ScrollView plus haut que votre écran.

Enveloppant ScrollView dans une vue avec une hauteur> l'écran fonctionnera également.

Answer 5

Je pense que vous pouvez résoudre ce problème en suivant les conseils ci-dessous: 1) En ajustant la position de la balise ScrollView, cela ira probablement au-dessus de votre condition directement à l'intérieur de <> </> ou ajoutez une balise de vue, au-dessus de la balise ScrollView comme

<><View style={{ Height: "auto", maxHeight: screenHeight}}><ScrollView>....</ScrollView></view></>

2) En ajustant la hauteur, la propriété maxHeight et la propriété flex

Si cela a fonctionné pour vous, faites-le moi savoir