时间戳

首页 > 解决方案 > 滚动在 ScrollViews 组合中过早结束 - React native

react-native - 滚动在 ScrollViews 组合中过早结束 - React native

问题描述

我有一个水平滚动视图和一个垂直滚动视图。垂直滚动视图滚动但过早结束。我认为水平滚动视图和导航栏占用的高度减去了底部的滚动部分。我该如何解决？我已经在安卓设备上测试过了。

看看这里的视频。

import React from 'react';
import { Text, View, ScrollView }from 'react-native';

export default class App extends React.Component{
  render(){
    return(
      <View>
        <ScrollView horizontal={true} style={{marginBottom: 1}}>
          <View style={{width:100, height: 100, marginRight: 1, backgroundColor: "red"}}>
          </View>
          <View style={{width:100, height: 100, marginRight: 1, backgroundColor: "red"}}>
          </View>
          <View style={{width:100, height: 100, marginRight: 1, backgroundColor: "red"}}>
          </View>
          <View style={{width:100, height: 100, marginRight: 1, backgroundColor: "red"}}>
          </View>
        </ScrollView>

        <ScrollView>
          <View style={{width:100, height: 200, marginBottom: 1, backgroundColor: "blue", justifyContent:"center"}}>
            <Text style={{color: 'white', textAlign: 'center'}}>1</Text>
          </View>

          <View style={{width:100, height: 200, marginBottom: 1, backgroundColor: "blue", justifyContent:"center"}}>
            <Text style={{color: 'white', textAlign: 'center'}}>2</Text>
          </View>

          <View style={{width:100, height: 200, marginBottom: 1, backgroundColor: "blue", justifyContent:"center"}}>
            <Text style={{color: 'white', textAlign: 'center'}}>3</Text>
          </View>

          <View style={{width:100, height: 200, marginBottom: 1, backgroundColor: "blue", justifyContent:"center"}}>
            <Text style={{color: 'white', textAlign: 'center'}}>4</Text>
          </View>

          <View style={{width:100, height: 200, marginBottom: 1, backgroundColor: "blue", justifyContent:"center"}}>
            <Text style={{color: 'white', textAlign: 'center'}}>5</Text>
          </View>

          <View style={{width:100, height: 200, marginBottom: 1, backgroundColor: "blue", justifyContent:"center"}}>
            <Text style={{color: 'white', textAlign: 'center'}}>6</Text>
          </View>
        </ScrollView>
      </View>
      );
  }
}

看看它在博览会上：

https://snack.expo.io/BJ3zEZEgm

标签： react-native

解决方案

不幸的是，我没有正确解释为什么在某些情况下滚动很短，但我发现的最简单的解决方法是添加contentContainerStyle={{paddingBottom: insertValueHere}}到垂直 ScrollView。只需调整填充的高度以满足您的需要（对我来说，这是 KeyboardAvoidingView 不起作用的键盘高度）。希望有帮助。

推荐阅读