nie można przewijać w scrollView
Mam ekran, na którym piszę w polu wejściowym i odpowiednio otrzymuję wyniki wyszukiwania. Lista jest renderowana w ScrollView, ale nadal nie pozwala mi przewijać, gdy klawiatura jest otwarta (w systemie Android).
Jak mogę to naprawić?
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),
},
});

Próbowałem już dodać nestedScrollEnabled = {true}, ale nie ma to znaczenia.
Tutaj nazywa się wspomniany komponent:
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.addressesFoundList} />
....
dropdown: {
position: 'absolute',
top: moderateScale(215),
zIndex: moderateScale(10),
backgroundColor: '#fff',
flex: 1,
},
Próbowałem dodać wysokość: 80% do dropdown
. Dzięki temu można trochę przewijać. Jednak gdy klawiatura jest otwarta, mogę przewijać, ale nie do końca. Jeśli dodam wysokość: 100%, w ogóle nie jestem w stanie przewijać.
Odpowiedzi
Przygotowałem dla Ciebie przekąskę na targi i zbadałem ją. Myślę, że rozwiązałem to. Spójrz na to:
To jest link do przekąski na targach
Aby to opisać:
Jak się dowiedziałem, Twoim problemem było to, że ScrollView
nie zmieniał wzrostu w żadnej sytuacji, nawet dając więcej height
lub dając paddingBottom
.
więc zawinąłem go ScrollView
w View
metkę i nadałem mu taką stylizację:
scrollViewWrapper: {
width: '100%',
minHeight: '100%',
paddingBottom: 1.3*keyboardHeight
}
W tej stylizacji widać parametr keyboardHeight
, który state
ustawiam w componentDidMount
poniższych kodach:
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,
});
};
Muszę wspomnieć, że nie można przenieść stylu paddingBottom: 1.3*keyboardHeight
poza komponent klasy i umieścić go w styles
obiekcie, ponieważ keyboardHeight
jest to a state
, można go poznać tylko wewnątrz komponentu.
Proponuję rzucić okiem na mój kod w przekąsce na targach, aby lepiej zrozumieć moje opisy.
Mam nadzieję, że to rozwiąże Twój problem.
Edytuj elementy funkcjonalne
użyj poniższego kodu, aby wykryć wysokość klawiatury podczas pisania elementów funkcjonalnych:
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)
};
Edytowałem też przekąskę na targach . możesz przyjrzeć się temu, aby zobaczyć działający przykład.
Przychodzą mi do głowy trzy rozwiązania (możesz spróbować jednego):
1-Spróbuj zawinąć widok przewijania wewnątrz znacznika widoku z flex = 1, na przykład:
<View style={{ flex:1 }}>
<ScrollView>
</ScrollView>
</View>
2 - jeśli nie chcesz używać widoku, możesz ustawić ScrollView flex na 1
W pierwszym rozwiązaniu 3 w możesz użyć pustego tagu zamiast widoku w ten sposób:
<>
</>
Jeśli problem dotyczy tylko otwartej klawiatury, możesz rzucić okiem na KeyboardAvoidingView
Miałem z tym wiele problemów! Chcesz wypróbować wszystkie ustawienia rekwizytu behavior
. prawdopodobnie jest taki, który działa dla Ciebie!
Z ich przykładów:
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;
Myślę, że jeśli zawartość ScrollView jest mniejsza niż ekran, nie będzie się przewijać. Możesz więc spróbować ustawić wysokość: „150%” lub coś w tym rodzaju, albo dodać pusty widok z wysokością, aby rozciągnąć ScrollView wyżej niż ekran.
Zawijanie ScrollView w widoku z wysokością> ekran również będzie działał.
Myślę, że możesz rozwiązać ten problem, postępując zgodnie z poniższymi wskazówkami: 1) Dostosowanie pozycji tagu ScrollView najprawdopodobniej przejdzie powyżej twojego stanu bezpośrednio w <> </> lub dodaj tag widoku, nad tagiem ScrollView, np.
<><View style={{ Height: "auto", maxHeight: screenHeight}}><ScrollView>....</ScrollView></view></>
2) Dostosowując wysokość, właściwość maxHeight i właściwość flex
Jeśli to zadziałało, daj mi znać