In scrollView kann nicht gescrollt werden
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
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 ScrollView
Höhe in keiner Situation änderte, selbst wenn Sie mehr height
gaben oder gaben paddingBottom
.
Also wickelte ich das ScrollView
in ein View
Etikett und gab ihm dieses Styling:
scrollViewWrapper: {
width: '100%',
minHeight: '100%',
paddingBottom: 1.3*keyboardHeight
}
In diesem Stil sehen Sie einen Parameter keyboardHeight
, den state
ich in den componentDidMount
folgenden 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*keyboardHeight
außerhalb der Klassenkomponente nicht verschieben und im styles
Objekt platzieren können, da keyboardHeight
es 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.
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:
<>
</>
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;
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.
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