स्क्रॉलव्यू में स्क्रॉल करने में असमर्थ

Aug 16 2020

मेरे पास एक स्क्रीन है जहां मैं इनपुट क्षेत्र में टाइप करता हूं और तदनुसार खोज परिणाम प्राप्त करता हूं। यह सूची एक स्क्रॉल दृश्य में दी गई है, लेकिन यह तब भी मुझे स्क्रॉल नहीं करने देता जब कीपैड खुला होता है (Android में)।

मैं इसे कैसे ठीक करूं?

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

मैंने पहले से ही nestedScrollEnabled = {true} को जोड़ने का प्रयास किया है, लेकिन इससे कोई फर्क नहीं पड़ता।

यह वह जगह है जहाँ उपर्युक्त घटक कहा जाता है:

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

मैंने ऊंचाई जोड़ने की कोशिश की: 80% तक dropdown। यह थोड़ा स्क्रॉल करना संभव बनाता है। हालाँकि, जब कीपैड खुला होता है तो मैं स्क्रॉल कर सकता हूं लेकिन अंत तक नहीं। यदि मैं ऊंचाई जोड़ूं: 100%, तो मैं स्क्रॉल करने में सक्षम नहीं हूं।

जवाब

1 MahdiehShavandi Aug 20 2020 at 13:46

मैंने आपकी समस्या के लिए एक एक्सपो स्नैक बनाया और इसकी जांच की। मुझे लगता है कि मैंने इसे हल कर दिया। इस पर एक नज़र मारो:

यह एक्सपो स्नैक की लिंक है

इसके बारे में बताने के लिए:

जैसा कि मुझे पता चला, आपकी समस्या यह थी कि ScrollViewकिसी भी स्थिति में ऊँचाई नहीं बदल रही थी, यहाँ तक कि अधिक heightया देकर भी paddingBottom।

इसलिए मैंने ScrollViewएक Viewटैग में लपेटा और इसे यह स्टाइल दिया:

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

इस स्टाइलिंग में, आप पैरामीटर देखते हैं keyboardHeight, जो stateकि मैं componentDidMountनीचे दिए गए कोड के साथ सेट कर रहा हूं :

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

मुझे यह उल्लेख करना होगा कि आप paddingBottom: 1.3*keyboardHeightवर्ग घटक के बाहर की शैली को स्थानांतरित नहीं कर सकते हैं और इसे stylesऑब्जेक्ट में रख सकते हैं , क्योंकि keyboardHeightयह एक है state, इसे घटक के अंदर ही जाना जा सकता है।

मेरा सुझाव है कि आप मेरे विवरण को बेहतर ढंग से समझने के लिए एक्सपो स्नैक में मेरे कोड पर एक नज़र डालें।

मुझे उम्मीद है कि यह आपकी समस्या को हल करेगा।

कार्यात्मक घटकों के लिए संपादित करें

कार्यात्मक घटक लिखते समय कीबोर्ड ऊंचाई का पता लगाने के लिए नीचे दिए गए कोड का उपयोग करें:

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

मैंने एक्सपो स्नैक का भी संपादन किया । आप एक काम कर रहे उदाहरण को देखने के लिए इसे देख सकते हैं।

Benyamin Aug 16 2020 at 13:57

मैं तीन समाधानों के बारे में सोच सकता हूं (आप या तो एक कोशिश कर सकते हैं):

1-फ्लेक्स = 1 जैसे दृश्य टैग के अंदर स्क्रॉल दृश्य को लपेटने का प्रयास करें:

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

2-यदि आप एक दृश्य का उपयोग नहीं करना चाहते हैं तो आप स्क्रॉलव्यू फ्लेक्स को 1 पर सेट कर सकते हैं

3-पहले समाधान में आप दृश्य के बजाय खाली टैग का उपयोग कर सकते हैं:

<> 
</>

MPN7 Aug 19 2020 at 17:43

यदि आपकी समस्या केवल कीपैड ओपन के साथ है, तो आप KeyboardAvoidingView पर एक नज़र डालना चाहते हैं

मुझे इससे बहुत समस्याएँ हैं! आप प्रोप के लिए सभी सेटिंग्स की कोशिश करना चाहते हैं behavior। वहाँ शायद एक है कि आप के लिए काम करता है!

उनके उदाहरणों से:

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

मुझे लगता है कि यदि आपका स्क्रॉल दृश्य सामग्री स्क्रीन से छोटा है, तो यह स्क्रॉल नहीं होगा। तो आप ऊंचाई बनाने की कोशिश कर सकते हैं: "150%" या ऐसा कुछ या अपनी स्क्रीन के लिए अपने स्क्रॉलव्यू को ऊंचा करने के लिए ऊंचाई के साथ खाली दृश्य में जोड़ें।

स्क्रॉलिंग व्यू को ऊंचाई वाले दृश्य में लपेटना> स्क्रीन भी काम करेगी।

MuhammadBilal Aug 22 2020 at 07:10

मुझे लगता है कि आप नीचे दिए गए सुझावों के द्वारा इस मुद्दे को ठीक कर सकते हैं: 1) स्क्रॉलव्यू टैग स्थिति को समायोजित करना सबसे संभवत: यह आपकी स्थिति के ऊपर सीधे जाएगा <> </> या स्क्रॉल टैग के ऊपर दृश्य टैग जोड़ें, जैसे

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

2) ऊंचाई, अधिकतम संपत्ति और फ्लेक्स संपत्ति को समायोजित करके