ไม่สามารถเลื่อนใน scrollView

Aug 16 2020

ฉันมีหน้าจอที่ฉันพิมพ์ในช่องป้อนข้อมูลและรับผลการค้นหาตามนั้น รายการแสดงผลภายใน ScrollView แต่ยังไม่ให้ฉันเลื่อนเมื่อเปิดปุ่มกด (ใน 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เป็น a 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- ลองตัดมุมมองแบบเลื่อนภายในแท็กมุมมองด้วย flex = 1 ดังนี้:

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

2- ถ้าคุณไม่ต้องการใช้มุมมองคุณสามารถตั้งค่า ScrollView flex เป็น 1

วิธีแก้ปัญหา 3 ในแรกคุณสามารถใช้แท็กว่างแทน View ได้ดังนี้:

<> 
</>
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

ฉันคิดว่าถ้าเนื้อหา ScrollView ของคุณเล็กกว่าหน้าจอมันจะไม่เลื่อน ดังนั้นคุณสามารถลองสร้างความสูง: "150%" หรืออะไรทำนองนั้นหรือเพิ่มในมุมมองที่ว่างเปล่าด้วยความสูงเพื่อยืด ScrollView ให้สูงกว่าหน้าจอ

การห่อ ScrollView ในมุมมองที่มีความสูง> หน้าจอก็จะใช้งานได้เช่นกัน

MuhammadBilal Aug 22 2020 at 07:10

ฉันคิดว่าคุณสามารถแก้ไขปัญหานี้ได้โดยทำตามคำแนะนำด้านล่าง: 1) การปรับตำแหน่งแท็ก ScrollView ส่วนใหญ่อาจอยู่เหนือเงื่อนไขของคุณโดยตรงภายใน <> </> หรือเพิ่มแท็กมุมมองเหนือแท็ก ScrollView เช่น

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

2) โดยการปรับความสูงคุณสมบัติ maxHeight และคุณสมบัติยืดหยุ่น

หากได้ผลสำหรับคุณโปรดแจ้งให้เราทราบ