无法在 scrollView 中滚动 [英] unable to scroll in scrollView
问题描述
我有一个屏幕,我可以在其中输入输入字段并相应地获得搜索结果.该列表在 ScrollView 中呈现,但当键盘打开时它仍然不允许我滚动(在 Android 中).
I have a screen where I type in the input field and get search results accordingly. The list is rendered within a ScrollView but it still doesn't let me scroll when the keypad is open (in Android ).
我该如何解决这个问题?
How can I fix this?
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} 但没有任何区别.
I have already tried adding nestedScrollEnabled={true} but it makes no difference.
这是上面提到的组件被调用的地方:
This is where the above mentioned component is called:
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.addressesFoundList} />
....
dropdown: {
position: 'absolute',
top: moderateScale(215),
zIndex: moderateScale(10),
backgroundColor: '#fff',
flex: 1,
},
我尝试将高度:80% 添加到 dropdown
.这使得可以稍微滚动一下.但是,当键盘打开时,我可以滚动但不能滚动到最后.如果我添加高度:100%,我根本无法滚动.
I tried adding height: 80% to dropdown
. This makes it possible to scroll a bit. However, when the keypad is open I can scroll but not to the end. If I add height: 100%, I am not able to scroll at all.
推荐答案
我为您的问题制作了一个博览会小吃并进行了检查.我想我解决了.看一看:
I made an expo snack for your problem and examined it. I think I solved it. take a look at it:
描述一下:
正如我发现的,您的问题是 ScrollView
在任何情况下都不会改变高度,即使提供更多的 height
或提供 paddingBottom代码>.
As I found out, your problem was that the ScrollView
wasn't changing height in any situations, even by giving more height
or giving paddingBottom
.
所以我将 ScrollView
包裹在一个 View
标签中,并赋予它这种样式:
so I wrapped the ScrollView
in a View
tag and gave this styling to it:
scrollViewWrapper: {
width: '100%',
minHeight: '100%',
paddingBottom: 1.3*keyboardHeight
}
在此样式中,您会看到参数 keyboardHeight
,这是我在 componentDidMount
中使用以下代码设置的 state
:
In this styling, you see parameter keyboardHeight
, which is a state
that I'm setting in the componentDidMount
with below codes:
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
,它可以在组件内部知道.
I have to mention that you cannot move the style of paddingBottom: 1.3*keyboardHeight
outside of the class component and place it in styles
object, because the keyboardHeight
is a state
, it can be known just inside the component.
建议你看看我在expo小吃中的代码,以便更好地理解我的描述.
I suggest you to take a look at my code in expo snack to understand my descriptions better.
希望这能解决您的问题.
I hope this solve your problem.
编辑功能组件
使用以下代码在编写功能组件时检测键盘高度:
use below code to detect keyboard height while writing functional components:
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)
};
我编辑了世博小吃 也是.您可以查看它以查看工作示例.
I edited the expo snack too. you can take a look at it to see a working example.
这篇关于无法在 scrollView 中滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!