ไม่สามารถเลื่อนใน scrollView
ฉันมีหน้าจอที่ฉันพิมพ์ในช่องป้อนข้อมูลและรับผลการค้นหาตามนั้น รายการแสดงผลภายใน 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% ฉันจะเลื่อนไม่ได้เลย
คำตอบ
ฉันทำขนมสำหรับงานแสดงสินค้าสำหรับปัญหาของคุณและตรวจสอบมัน คิดว่าแก้แล้ว ดูมัน:
นี่คือลิงค์ไปยังงานแสดงขนมขบเคี้ยว
เพื่ออธิบายเกี่ยวกับเรื่องนี้:
อย่างที่ฉันพบปัญหาของคุณคือ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)
};
ฉันแก้ไขสแน็คของงานแสดงสินค้าด้วย คุณสามารถดูเพื่อดูตัวอย่างการทำงาน
ฉันคิดได้สามวิธี (คุณสามารถลองวิธีใดวิธีหนึ่ง):
1- ลองตัดมุมมองแบบเลื่อนภายในแท็กมุมมองด้วย flex = 1 ดังนี้:
<View style={{ flex:1 }}>
<ScrollView>
</ScrollView>
</View>
2- ถ้าคุณไม่ต้องการใช้มุมมองคุณสามารถตั้งค่า ScrollView flex เป็น 1
วิธีแก้ปัญหา 3 ในแรกคุณสามารถใช้แท็กว่างแทน View ได้ดังนี้:
<>
</>
หากปัญหาของคุณเกิดขึ้นเฉพาะกับปุ่มกดที่เปิดอยู่คุณอาจต้องดูที่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;
ฉันคิดว่าถ้าเนื้อหา ScrollView ของคุณเล็กกว่าหน้าจอมันจะไม่เลื่อน ดังนั้นคุณสามารถลองสร้างความสูง: "150%" หรืออะไรทำนองนั้นหรือเพิ่มในมุมมองที่ว่างเปล่าด้วยความสูงเพื่อยืด ScrollView ให้สูงกว่าหน้าจอ
การห่อ ScrollView ในมุมมองที่มีความสูง> หน้าจอก็จะใช้งานได้เช่นกัน
ฉันคิดว่าคุณสามารถแก้ไขปัญหานี้ได้โดยทำตามคำแนะนำด้านล่าง: 1) การปรับตำแหน่งแท็ก ScrollView ส่วนใหญ่อาจอยู่เหนือเงื่อนไขของคุณโดยตรงภายใน <> </> หรือเพิ่มแท็กมุมมองเหนือแท็ก ScrollView เช่น
<><View style={{ Height: "auto", maxHeight: screenHeight}}><ScrollView>....</ScrollView></view></>
2) โดยการปรับความสูงคุณสมบัติ maxHeight และคุณสมบัติยืดหยุ่น
หากได้ผลสำหรับคุณโปรดแจ้งให้เราทราบ