impossibile scorrere in scrollView

Aug 16 2020

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

1 MahdiehShavandi Aug 20 2020 at 13:46

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 ScrollViewnon cambiava altezza in nessuna situazione, anche dando di più heighto dando paddingBottom.

quindi ho inserito ScrollViewun Viewtag e gli ho dato questo stile:

scrollViewWrapper: {
     width: '100%',
     minHeight: '100%',
     paddingBottom: 1.3*keyboardHeight
 }

In questo stile, vedi il parametro keyboardHeight, che è statequello che sto impostando nei componentDidMountseguenti 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*keyboardHeightfuori del componente di classe e metterlo in stylesoggetto, 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.

Benyamin Aug 16 2020 at 13:57

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:

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

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

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

MuhammadBilal Aug 22 2020 at 07:10

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