không thể cuộn trong scrollView
Tôi có một màn hình nơi tôi nhập trường đầu vào và nhận kết quả tìm kiếm tương ứng. Danh sách được hiển thị trong ScrollView nhưng nó vẫn không cho phép tôi cuộn khi bàn phím đang mở (trong Android).
Làm thế nào tôi có thể sửa lỗi này?
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),
},
});
Tôi đã thử thêm nestedScrollEnabled = {true} nhưng không có gì khác biệt.
Đây là nơi mà thành phần được đề cập ở trên được gọi là:
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.addressesFoundList} />
....
dropdown: {
position: 'absolute',
top: moderateScale(215),
zIndex: moderateScale(10),
backgroundColor: '#fff',
flex: 1,
},
Tôi đã thử thêm chiều cao: 80% vào dropdown. Điều này giúp bạn có thể cuộn một chút. Tuy nhiên, khi bàn phím mở, tôi có thể cuộn nhưng không đến cuối. Nếu tôi thêm chiều cao: 100%, tôi không thể cuộn được.
Trả lời
Tôi đã làm một bữa ăn nhẹ hội chợ cho vấn đề của bạn và kiểm tra nó. Tôi nghĩ rằng tôi đã giải quyết nó. hãy nhìn vào nó:
Đây là liên kết đến món ăn nhẹ hội chợ
Để mô tả về nó:
Khi tôi phát hiện ra, vấn đề của bạn là ScrollViewchiều cao không thay đổi trong bất kỳ tình huống nào, kể cả khi cho nhiều heighthay ít paddingBottom.
vì vậy tôi đã bọc thẻ ScrollViewvào một Viewthẻ và tạo kiểu dáng này cho nó:
scrollViewWrapper: {
width: '100%',
minHeight: '100%',
paddingBottom: 1.3*keyboardHeight
}
Trong kiểu này, bạn sẽ thấy thông số keyboardHeight, là thông số mà statetôi đang cài đặt componentDidMountvới các mã bên dưới:
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,
});
};
Tôi phải đề cập rằng bạn không thể di chuyển kiểu paddingBottom: 1.3*keyboardHeightbên ngoài của thành phần lớp và đặt nó trong stylesđối tượng, bởi vì keyboardHeightlà a state, nó có thể được biết ngay bên trong thành phần.
Tôi khuyên bạn nên xem mã của tôi trong bữa ăn nhẹ hội chợ để hiểu rõ hơn các mô tả của tôi.
Tôi hy vọng điều này giải quyết được vấn đề của bạn.
Chỉnh sửa cho các thành phần chức năng
sử dụng mã bên dưới để phát hiện chiều cao bàn phím trong khi viết các thành phần chức năng:
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)
};
Tôi cũng đã chỉnh sửa bữa ăn nhẹ của hội chợ . bạn có thể nhìn vào nó để xem một ví dụ hoạt động.
Tôi có thể nghĩ ra ba giải pháp (bạn có thể thử một trong hai giải pháp):
1-Hãy thử gói chế độ xem cuộn bên trong thẻ chế độ xem với flex = 1, như thế này:
<View style={{ flex:1 }}>
<ScrollView>
</ScrollView>
</View>
2-nếu bạn không muốn sử dụng một dạng xem, bạn có thể đặt ScrollView flex thành 1
Giải pháp đầu tiên 3 trong bạn có thể sử dụng thẻ trống thay vì Chế độ xem như vậy:
<>
</>
Nếu vấn đề của bạn chỉ là bàn phím mở thì bạn có thể muốn xem qua KeyboardAvoidingView
Tôi đã có rất nhiều vấn đề với điều này! Bạn muốn thử tất cả các cài đặt cho chỗ dựa behavior. có thể có một cái phù hợp với bạn!
Từ các ví dụ của họ:
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;
Tôi nghĩ rằng nếu nội dung ScrollView của bạn nhỏ hơn màn hình, nó sẽ không cuộn. Vì vậy, bạn có thể thử tạo chiều cao: "150%" hoặc tương tự như vậy hoặc thêm vào một chế độ xem trống có chiều cao để kéo ScrollView cao hơn màn hình của bạn.
Gói ScrollView trong Chế độ xem có chiều cao> màn hình cũng sẽ hoạt động.
Tôi nghĩ vì vậy bạn có thể khắc phục sự cố này bằng cách làm theo các mẹo dưới đây: 1) Điều chỉnh vị trí thẻ ScrollView rất có thể nó sẽ vượt qua điều kiện của bạn ngay bên trong <> </> hoặc thêm thẻ xem, bên trên thẻ ScrollView như
<><View style={{ Height: "auto", maxHeight: screenHeight}}><ScrollView>....</ScrollView></view></>
2) Bằng cách điều chỉnh chiều cao, thuộc tính maxHeight và thuộc tính flex
Nếu nó làm việc cho bạn, xin vui lòng cho tôi biết