[英]react-native-keyboard-aware-scroll-view on Android only scrolls when I add empty space to the bottom of my form
I am using react-native-keyboard-aware-scroll-view on my login form.我在我的登录表单上使用 react-native-keyboard-aware-scroll-view。 This is what my code looks like:
这就是我的代码的样子:
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.root}>
<KeyboardAwareScrollView
enableOnAndroid={true}
showsVerticalScrollIndicator={false}
extraHeight={-90}
keyboardShouldPersistTaps='handled'>
<View style={styles.logoContainer}>
<Image source={images.outfastLogo} resizeMode='contain' style={styles.logo} />
</View>
<View style={styles.formContainer}>
<SignInForm setShowResetPassword={setShowResetPassword} />
</View>
</KeyboardAwareScrollView>
</View>
</SafeAreaView>
and my styles:和我的 styles:
export default StyleSheet.create({
root: {
flex: 1,
width: '100%',
padding: 30,
},
logoContainer: {
marginTop: 40,
width: '100%',
alignItems: 'center',
},
logo: {
width: 220,
height: 120,
},
formContainer: {
flex: 1,
width: '100%',
marginTop: 15,
},
})
Everything works fine on iOS but on Android when I leave my form like this I can't scroll down to the signin button.在 iOS 上一切正常,但在 Android 上,当我像这样离开表单时,我无法向下滚动到登录按钮。
However if I leave add a spacer component (empty View with a height) to the scrollview's content at the bottom, I can scroll up high enough)但是,如果我在底部的滚动视图的内容中添加一个间隔组件(具有高度的空视图),我可以向上滚动足够高)
extraScrollHeight property appears to do nothing. extraScrollHeight 属性似乎什么都不做。 I thought that was the point of this component.
我认为这就是这个组件的重点。 I don't like adding a hard-coded spacer element in because every phone will have a different keyboard height.
我不喜欢在其中添加硬编码的间隔元素,因为每部手机都会有不同的键盘高度。
What's going on here?这里发生了什么? I always have difficulty getting this component to work properly.
我总是很难让这个组件正常工作。 It does in some cases and in others it doesn't.
在某些情况下会这样做,而在其他情况下则不会。 There seems to be no good alternatives and a quick internet search will show a slew of people with similar issues but none that are exactly like mine.
似乎没有好的选择,快速的互联网搜索将显示大量有类似问题的人,但没有一个与我的完全一样。
OK, I looked at the source code and I saw that if the platform is android and enableOnAndroid is set to true, and if you don't add any styles to contentContainerStyle, this component will add a paddingBottom of 0 to the Scrollview's content.好的,我看了一下源码,看到如果平台是android并且enableOnAndroid设置为true,并且不给contentContainerStyle添加任何styles,这个组件就会给Scrollview的内容添加一个paddingBottom为0。 So, I added
contentContainerStyle={{paddingBottom: Platform.OS === 'android'? 130: 0}}
所以,我添加了
contentContainerStyle={{paddingBottom: Platform.OS === 'android'? 130: 0}}
contentContainerStyle={{paddingBottom: Platform.OS === 'android'? 130: 0}}
and enableOnAndroid={true}
. contentContainerStyle={{paddingBottom: Platform.OS === 'android'? 130: 0}}
和enableOnAndroid={true}
。
This is still just the equivalent of my spacer component.这仍然相当于我的间隔组件。 There must be a better approach.
必须有更好的方法。 I'm putting this up here to help others but if there is a better solution I would love to hear about it.
我把它放在这里是为了帮助别人,但如果有更好的解决方案,我很想听听。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.