Question

我有一个水平scrollView和一个垂直scrollView。垂直滚动视图滚动但过早结束。我认为水平滚动视图和导航栏占用的高度会扣除底部的滚动部分。我该如何解决？我在Android设备上测试了它。

观看视频here.

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

Answer 1

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

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

1 个答案: