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입니다.
그래서 포장 ScrollViewA의 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)
};
엑스포 스낵 도 편집했습니다 . 작동 예제를보기 위해 살펴볼 수 있습니다.
세 가지 해결책을 생각할 수 있습니다 (둘 중 하나를 시도 할 수 있음).
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 Tag를 추가합니다.
<><View style={{ Height: "auto", maxHeight: screenHeight}}><ScrollView>....</ScrollView></view></>
2) height, maxHeight 속성 및 flex 속성을 조정하여
그것이 당신을 위해 일했다면 알려주세요