impossibile scorrere in scrollView
Ho una schermata in cui digito nel campo di input e ottengo i risultati della ricerca di conseguenza. L'elenco viene visualizzato in una ScrollView ma non mi consente ancora di scorrere quando la tastiera è aperta (in Android).
Come posso risolvere questo problema?
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),
},
});

Ho già provato ad aggiungere nestedScrollEnabled = {true} ma non fa differenza.
È qui che viene chiamato il componente sopra menzionato:
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.addressesFoundList} />
....
dropdown: {
position: 'absolute',
top: moderateScale(215),
zIndex: moderateScale(10),
backgroundColor: '#fff',
flex: 1,
},
Ho provato ad aggiungere l'altezza: 80% a dropdown
. Ciò rende possibile scorrere un po '. Tuttavia, quando la tastiera è aperta posso scorrere ma non fino alla fine. Se aggiungo altezza: 100%, non sono in grado di scorrere affatto.
Risposte
Ho preparato uno spuntino da esposizione per il tuo problema e l'ho esaminato. Penso di averlo risolto. dai un'occhiata:
Questo il link alla merenda dell'expo
Per descriverlo:
Come ho scoperto, il tuo problema era che ScrollView
non cambiava altezza in nessuna situazione, anche dando di più height
o dando paddingBottom
.
quindi ho inserito ScrollView
un View
tag e gli ho dato questo stile:
scrollViewWrapper: {
width: '100%',
minHeight: '100%',
paddingBottom: 1.3*keyboardHeight
}
In questo stile, vedi il parametro keyboardHeight
, che è state
quello che sto impostando nei componentDidMount
seguenti codici:
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,
});
};
Devo dire che non puoi spostare lo stile di paddingBottom: 1.3*keyboardHeight
fuori del componente di classe e metterlo in styles
oggetto, perché keyboardHeight
è a state
, può essere conosciuto solo all'interno del componente.
Ti consiglio di dare un'occhiata al mio codice in expo snack per capire meglio le mie descrizioni.
Spero che questo risolva il tuo problema.
Modifica per componenti funzionali
utilizzare il codice seguente per rilevare l'altezza della tastiera durante la scrittura di componenti funzionali:
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)
};
Ho anche curato la merenda dell'expo . puoi dare un'occhiata per vedere un esempio funzionante.
Posso pensare a tre soluzioni (puoi provarne una):
1-Prova a racchiudere la visualizzazione a scorrimento all'interno di un tag di visualizzazione con flex = 1, in questo modo:
<View style={{ flex:1 }}>
<ScrollView>
</ScrollView>
</View>
2-se non vuoi usare una vista puoi impostare ScrollView flex su 1
3-in prima soluzione puoi usare un tag vuoto invece di Visualizza in questo modo:
<>
</>
Se il tuo problema è solo con la tastiera aperta, potresti voler dare un'occhiata a KeyboardAvoidingView
Ho avuto molti problemi con questo! Vuoi provare tutte le impostazioni per l'elica behavior
. probabilmente ce n'è uno che funziona per te!
Dai loro esempi:
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;
Penso che se i tuoi contenuti ScrollView sono più piccoli dello schermo, non scorrerà. Quindi puoi provare a fare l'altezza: "150%" o qualcosa del genere o aggiungere in una vista vuota con un'altezza per allungare il tuo ScrollView più in alto dello schermo.
Avvolgere ScrollView in una vista con altezza> anche lo schermo funzionerà.
Penso che tu possa risolvere questo problema seguendo i seguenti suggerimenti: 1) Regolando la posizione del tag ScrollView molto probabilmente andrà al di sopra della tua condizione direttamente all'interno di <> </> o aggiungi il tag di visualizzazione, sopra il tag ScrollView come
<><View style={{ Height: "auto", maxHeight: screenHeight}}><ScrollView>....</ScrollView></view></>
2) Regolando l'altezza, la proprietà maxHeight e la proprietà flex
Se ha funzionato per te, fammelo sapere