scrollView'da kaydırılamıyor

Question

Giriş alanına yazdığım ve buna göre arama sonuçlarını aldığım bir ekranım var. Liste bir ScrollView içinde işleniyor ancak yine de tuş takımı açıkken (Android'de) kaydırmama izin vermiyor.

Bunu nasıl düzeltebilirim?

  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),
  },
});

Zaten nestedScrollEnabled = {true} eklemeyi denedim ama bu fark etmez.

Yukarıda belirtilen bileşenin adı burasıdır:

        <View style={styles.dropdown}>
          <LocationsFound
            addressesFound={locations.addressesFoundList} />
....
  dropdown: {
    position: 'absolute',
    top: moderateScale(215),
    zIndex: moderateScale(10),
    backgroundColor: '#fff',
    flex: 1,
  },

Yükseklik eklemeyi denedim:% 80'e dropdown. Bu, biraz kaydırmayı mümkün kılar. Bununla birlikte, tuş takımı açıkken kaydırabilirim ancak sonuna kadar gidemem. Yükseklik eklersem:% 100, hiç kaydıramıyorum.

Answer 1

Sorunuz için bir expo atıştırması yaptım ve inceledim. Sanırım çözdüm. ona bir göz atın:

Bu, fuar atıştırmalıklarının bağlantısı

Bunu açıklamak için:

Öğrendiğim gibi, senin problemin, ScrollViewdaha fazla heightvererek veya vererek bile hiçbir durumda boyunun değişmemesiydi paddingBottom.

bu yüzden ScrollViewbir Viewetikete sardım ve bu stili ona verdim:

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

Bu stilde, aşağıdaki kodlarda ayarladığım keyboardHeightbir parametre görüyorsunuz :statecomponentDidMount

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,
  });
};

Stilini paddingBottom: 1.3*keyboardHeightsınıf bileşeninin dışına taşıyıp stylesnesneye yerleştiremeyeceğinizi belirtmek zorundayım , çünkü bu keyboardHeight, statebileşenin hemen içinde bilinebilir.

Açıklamalarımı daha iyi anlamak için expo atıştırmalık koduma bir göz atmanızı öneririm.

Umarım bu sorununuzu çözer.

İşlevsel bileşenler için düzenleme

işlevsel bileşenleri yazarken klavye yüksekliğini tespit etmek için aşağıdaki kodu kullanın:

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)
};

Expo atıştırmalıklarını da düzenledim . çalışan bir örnek görmek için ona bir göz atabilirsiniz.

Answer 2

Üç çözüm düşünebilirim (ikisinden birini deneyebilirsiniz):

1-Kaydırma görünümünü flex = 1 ile bir görünüm etiketinin içine kaydırmayı deneyin, örneğin:

<View style={{ flex:1 }}>
<ScrollView>
</ScrollView>
</View>

2-Bir görünümü kullanmak istemiyorsanız, ScrollView flex'i 1'e ayarlayabilirsiniz.

3'ü ilk çözümde Görüntüle yerine boş etiket kullanabilirsiniz:

<> 
</>

Answer 3

Sorununuz yalnızca tuş takımı açıksa, KeyboardAvoidingView'a bir göz atmak isteyebilirsiniz.

Bununla bir çok problemim oldu! Destek için tüm ayarları denemek istiyorsunuz behavior. muhtemelen sizin için çalışan bir tane var!

Örneklerinden:

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;

Answer 4

ScrollView içeriğiniz ekrandan daha küçükse kaymayacağını düşünüyorum. Böylece yükseklik yapmayı deneyebilirsiniz: "% 150" veya bunun gibi bir şey ya da ScrollView'unuzu ekranınızdan daha yükseğe uzatmak için boş bir görünüm ekleyebilirsiniz.

ScrollView'u yüksekliğe sahip bir Görünümde Sarmak> ekran da çalışacaktır.

Answer 5

Sanırım bu sorunu aşağıdaki ipuçlarını izleyerek çözebilirsiniz: 1) ScrollView etiket konumunu ayarlamak, büyük olasılıkla doğrudan <> </> içinde koşulunuzun üzerine çıkacaktır veya ScrollView etiketinin üstüne görünüm Etiketi ekleyecektir.

<><View style={{ Height: "auto", maxHeight: screenHeight}}><ScrollView>....</ScrollView></view></>

2) Yükseklik, maxHeight özelliği ve esneklik özelliğini ayarlayarak

Senin için işe yaradıysa lütfen bana bildirin