In scrollView kann nicht gescrollt werden

Aug 16 2020

Ich habe einen Bildschirm, auf dem ich das Eingabefeld eingebe und entsprechende Suchergebnisse erhalte. Die Liste wird in einer ScrollView gerendert, aber ich kann immer noch nicht scrollen, wenn die Tastatur geöffnet ist (in Android).

Wie kann ich das beheben?

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

Ich habe bereits versucht, nestedScrollEnabled = {true} hinzuzufügen, aber es macht keinen Unterschied.

Hier heißt die oben genannte Komponente:

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

Ich habe versucht, Höhe hinzuzufügen: 80% zu dropdown. Dies ermöglicht es, ein wenig zu scrollen. Wenn die Tastatur geöffnet ist, kann ich jedoch scrollen, aber nicht bis zum Ende. Wenn ich die Höhe 100% hinzufüge, kann ich überhaupt nicht scrollen.

Antworten

1 MahdiehShavandi Aug 20 2020 at 13:46

Ich habe einen Expo-Snack für Ihr Problem gemacht und ihn untersucht. Ich glaube ich habe es gelöst. Schau es dir an:

Dies ist der Link zum Expo-Snack

Um es zu beschreiben:

Wie ich herausfand, bestand Ihr Problem darin, dass sich die ScrollViewHöhe in keiner Situation änderte, selbst wenn Sie mehr heightgaben oder gaben paddingBottom.

Also wickelte ich das ScrollViewin ein ViewEtikett und gab ihm dieses Styling:

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

In diesem Stil sehen Sie einen Parameter keyboardHeight, den stateich in den componentDidMountfolgenden Codes einstelle :

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

Ich muss erwähnen, dass Sie den Stil von paddingBottom: 1.3*keyboardHeightaußerhalb der Klassenkomponente nicht verschieben und im stylesObjekt platzieren können, da keyboardHeightes sich um eine handelt state, die nur innerhalb der Komponente bekannt sein kann.

Ich empfehle Ihnen, sich meinen Code im Expo-Snack anzusehen, um meine Beschreibungen besser zu verstehen.

Ich hoffe das löst dein Problem.

Für Funktionskomponenten bearbeiten

Verwenden Sie den folgenden Code, um die Tastaturhöhe beim Schreiben von Funktionskomponenten zu ermitteln:

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

Ich habe auch den Expo-Snack bearbeitet . Sie können es sich ansehen, um ein funktionierendes Beispiel zu sehen.

Benyamin Aug 16 2020 at 13:57

Ich kann mir drei Lösungen vorstellen (Sie können beide ausprobieren):

1-Versuchen Sie, die Bildlaufansicht wie folgt in ein Ansichtstag mit flex = 1 einzubinden:

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

2-Wenn Sie keine Ansicht verwenden möchten, können Sie ScrollView flex auf 1 setzen

3-in-First-Lösung Sie können ein leeres Tag anstelle von View wie folgt verwenden:

<> 
</>
MPN7 Aug 19 2020 at 17:43

Wenn Ihr Problem nur bei geöffneter Tastatur besteht, sollten Sie sich KeyboardAvoidingView ansehen

Ich hatte viele Probleme damit! Sie möchten alle Einstellungen für die Requisite ausprobieren behavior. Es gibt wahrscheinlich eine, die für Sie funktioniert!

Aus ihren Beispielen:

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;
Hogan Aug 21 2020 at 17:03

Ich denke, wenn Ihr ScrollView-Inhalt kleiner als der Bildschirm ist, wird er nicht gescrollt. Sie können also versuchen, die Höhe zu bestimmen: "150%" oder ähnliches oder eine leere Ansicht mit einer Höhe hinzufügen, um Ihre ScrollView höher als Ihren Bildschirm zu strecken.

Wenn Sie ScrollView in eine Ansicht mit Höhe> einschließen, funktioniert auch der Bildschirm.

MuhammadBilal Aug 22 2020 at 07:10

Ich denke, Sie können dieses Problem beheben, indem Sie die folgenden Tipps befolgen: 1) Wenn Sie die Position des ScrollView-Tags anpassen, wird es höchstwahrscheinlich direkt in <> </> über Ihren Zustand hinausgehen oder ein View-Tag über dem ScrollView-Tag hinzufügen

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

2) Durch Einstellen der Höhe, der maxHeight-Eigenschaft und der Flex-Eigenschaft

Wenn es bei Ihnen funktioniert hat, lassen Sie es mich bitte wissen