Javascript 当键盘打开时滚动
在我的屏幕上,我键入输入字段并相应地获得搜索结果。列表在ScrollView中呈现,但当键盘打开时,它仍然不允许我滚动(至少在Android中) 我怎样才能解决这个问题 这是渲染滚动视图的组件Javascript 当键盘打开时滚动,javascript,css,reactjs,typescript,react-native,Javascript,Css,Reactjs,Typescript,React Native,在我的屏幕上,我键入输入字段并相应地获得搜索结果。列表在ScrollView中呈现,但当键盘打开时,它仍然不允许我滚动(至少在Android中) 我怎样才能解决这个问题 这是渲染滚动视图的组件 export const LocationsFound: React.FunctionComponent<LocationsFoundProps> = ({ addressesFound, }) => { return ( <> {address
export const LocationsFound: React.FunctionComponent<LocationsFoundProps> = ({
addressesFound,
}) => {
return (
<>
{addressesFound.length > 0 ? (
<KeyboardAwareScrollView
style={styles.searchResultsContainer}
keyboardShouldPersistTaps={'always'}
keyboardDismissMode={'on-drag'}
>
{addressesFound.map((addressDetails: addressDetailsType) => {
return (
<View
key={addressDetails.placeName}
style={styles.resultContainer}>
<Text
style={styles.text}
onPress={() => handleLocationSelection(addressDetails)}>
{addressDetails.placeName}
</Text>
</View>
);
})}
</KeyboardAwareScrollView>
) : null}
</>
);
};
const styles = StyleSheet.create({
searchResultsContainer: {
width: moderateScale(400),
paddingHorizontal: moderateScale(50),
paddingRight: moderateScale(65),
marginTop: moderateScale(10),
},
resultContainer: {
marginTop: moderateScale(10),
borderBottomWidth: 1,
borderBottomColor: 'grey',
},
text: {
fontSize: moderateScale(15),
},
});
但是这没有什么区别。听起来像是一个高度问题,如果没有所有的代码,没有人会在没有猜测的情况下给你明确的答案。键盘不会收缩视图,请查看此软件包,它可能会有所帮助-您是否在所有父视图和滚动视图上都有
flex:1
?是的,我尝试过在所有位置添加flex:1,但没有任何区别@EricHasselbringI也尝试过这个,但我仍然无法滚动。我在qs中添加了更多代码,你能看一下吗?
return (
<SafeAreaView style={styles.safeAreaViewContainer}>
<View style={styles.container}>
<View style={styles.searchFieldContainer}>
<AddressSearchInput
addressType="favouritePoint"
placeholder="Ort eingeben"
/>
</View>
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.addressesFoundList}
/>
</View>
</View>
</SafeAreaView>
);
};
export const styles = StyleSheet.create({
safeAreaViewContainer: {
flex: 1,
},
container: {
height: '100%',
backgroundColor: 'white',
width: '100%',
display:"flex",
flexDirection:"column",
flex: 1
},
dropdown: {
position: 'absolute',
top: moderateScale(215),
zIndex: moderateScale(10),
backgroundColor: '#fff',
flex: 1
},
});
onScrollBeginDrag={Keyboard.dismiss}