incapaz de rolar em scrollView

Aug 16 2020

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

1 MahdiehShavandi Aug 20 2020 at 13:46

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 ScrollViewnão mudava de altura em nenhuma situação, mesmo dando mais heightou dando paddingBottom.

então envolvi o ScrollViewem uma Viewtag 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 stateque estou definindo componentDidMountcom 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*keyboardHeightfora do componente de classe e colocá-lo no stylesobjeto, 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.

Benyamin Aug 16 2020 at 13:57

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:

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

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

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á.

MuhammadBilal Aug 22 2020 at 07:10

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