incapaz de rolar em scrollView
Tenho uma tela onde digito no campo de entrada e obtenho os resultados da pesquisa de acordo. A lista é renderizada em um ScrollView, mas ainda não me permite rolar quando o teclado está aberto (no Android).
Como posso consertar isso?
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á tentei adicionar nestedScrollEnabled = {true}, mas não faz diferença.
É aqui que o componente mencionado acima é chamado:
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.addressesFoundList} />
....
dropdown: {
position: 'absolute',
top: moderateScale(215),
zIndex: moderateScale(10),
backgroundColor: '#fff',
flex: 1,
},
Tentei adicionar altura: 80% a dropdown
. Isso torna possível rolar um pouco. No entanto, quando o teclado está aberto, posso rolar, mas não até o fim. Se eu adicionar altura: 100%, não consigo rolar.
Respostas
Fiz um lanche de exposição para o seu problema e examinei. Acho que resolvi. dê uma olhada nisto:
Este é o link para o lanche da expo
Para descrever sobre isso:
Como descobri, seu problema era que ScrollView
não mudava de altura em nenhuma situação, mesmo dando mais height
ou dando paddingBottom
.
então envolvi o ScrollView
em uma View
tag e dei este estilo a ele:
scrollViewWrapper: {
width: '100%',
minHeight: '100%',
paddingBottom: 1.3*keyboardHeight
}
Neste estilo, você vê o parâmetro keyboardHeight
, que é um state
que estou definindo componentDidMount
com os códigos abaixo:
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 mencionar que você não pode mover o estilo de paddingBottom: 1.3*keyboardHeight
fora do componente de classe e colocá-lo no styles
objeto, porque o keyboardHeight
é um state
, pode ser conhecido apenas dentro do componente.
Eu sugiro que você dê uma olhada no meu código no expo snack para entender melhor minhas descrições.
Espero que isso resolva seu problema.
Editar para componentes funcionais
use o código abaixo para detectar a altura do teclado ao escrever componentes funcionais:
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)
};
Eu editei o lanche da expo também. você pode dar uma olhada nele para ver um exemplo funcional.
Posso pensar em três soluções (você pode tentar qualquer uma):
1-Tente envolver a visualização de rolagem dentro de uma tag de visualização com flex = 1, assim:
<View style={{ flex:1 }}>
<ScrollView>
</ScrollView>
</View>
2-se você não quiser usar uma visualização, você pode definir ScrollView flex para 1
3-na primeira solução, você pode usar uma tag vazia em vez de Exibir, assim:
<>
</>
Se o seu problema for apenas com o teclado aberto, você pode querer dar uma olhada em KeyboardAvoidingView
Eu tive muitos problemas com isso! Você quer experimentar todas as configurações do suporte behavior
. provavelmente existe um que funciona para você!
Dos exemplos deles:
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;
Acho que se o conteúdo do ScrollView for menor do que a tela, ele não rolará. Então você pode tentar fazer height: "150%" ou algo parecido ou adicionar em uma visão vazia com uma altura para esticar seu ScrollView mais alto do que sua tela.
Envolvendo ScrollView em uma visualização com altura> a tela também funcionará.
Acho que você pode corrigir esse problema seguindo as dicas abaixo: 1) Ajustando a posição da tag ScrollView, muito provavelmente, irá acima de sua condição diretamente dentro de <> </> ou adicionará a tag view, acima da tag ScrollView, como
<><View style={{ Height: "auto", maxHeight: screenHeight}}><ScrollView>....</ScrollView></view></>
2) Ajustando a altura, propriedade maxHeight e propriedade flex
Se funcionou para você, por favor me avise