如何解决KeyboardAwareScrollView有额外的底部填充吗?
我在KeyboardAwareScrollView
遇到了一段时间的问题,它在底部(黄色)有一些额外的填充。在这里,我希望我的表单始终位于屏幕底部,看来此填充不允许这样做。
export const LoginView: React.FC = () => {
return (
<View style={styles.container}>
<KeyboardAwareScrollView
style={styles.scrollContainer}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
>
<View
style={{
justifyContent: "space-between",backgroundColor: "green",}}
>
<View style={styles.imageContainer}>
<Image></Image>
</View>
<View style={styles.formConstainer}>
<Formik></Formik>
</View>
</View>
</KeyboardAwareScrollView>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,},scrollContainer: {
backgroundColor: "yellow",imageContainer: {
alignItems: "center",justifyContent: "center",formConstainer: {},});
这是现在的样子。
解决方法
只需将KeyboardAwareScrollView样式更改为contentContainerStyle(这些样式将应用于包含所有子视图的滚动视图内容容器。) 并添加flex以在其中查看。
<template v-for="item in Object.values(cart)">
<tr :key="item.id">
<td>Digest {{ item.digestId }}</td>
<td>{{ item.duration_text }} subscription</td>
<td class="price-cell">${{ roundMoney(item.price,2) }}</td>
<td class="trash-cell">
<fa-icon icon="times-circle" size="lg" @click="removeItem(item)" />
</td>
</tr>
<tr v-if="item.discounts.length" :key="`${item.id}-${item.discounts && item.discounts[0].id}`">
<td colspan="2">
<label>Code: {{ item.discounts[0].code }}</label>
</td>
<td colspan="2">
<span class="discount-amount">–${{ item.discounts[0].percent_off }}</span>
</td>
<td class="trash-discount-cell">
<fa-icon icon="times-circle" class="trash" @click="rmDscnt(item.discounts[0])" />
</td>
</tr>
</template>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。