当子视图绝对定位时，ScrollView 跳转到顶部答案

【问题标题】：ScrollView jumps to top when child views are positioned absolutely当子视图绝对定位时，ScrollView 跳转到顶部
【发布时间】：2018-09-28 05:51:45
【问题描述】：

我想创建一个ScrollView，它有两列包含不对称高度的Views。我认为使用 flexbox 不可能做到这一点，所以我正在使用绝对值来玩弄它（每个文档都不鼓励）。

所有子视图都按我的预期显示。我可以滚动，但是当我松开手指时，ScrollView 会返回顶部。我已经指定了层次结构中每个视图的高度。我该如何解决？

请记住，ScrollViews 必须有一个有界的高度才能工作，因为它们包含无限高的孩子到有界容器（通过滚动交互）。为了限制高度一个ScrollView，要么直接设置视图的高度（不鼓励）或确保所有父视图都具有界限高度。

代码（试试snack.expo.io）：

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

const { width, height } = Dimensions.get('window');
const gutterSize = 10;
const columns = 2;
const colWidth = (width / columns) - (gutterSize * columns) + (gutterSize / 2);
const style = {width: colWidth, height: 100, backgroundColor: '#0f0', marginLeft: gutterSize, marginTop: gutterSize, position: 'absolute'};

export default class App extends Component {

  render() {
    return (
      <View style={{height: height, backgroundColor: '#00f'}}>
        <ScrollView style={{backgroundColor: '#f00', height: 3000, position: 'absolute', width: width, top: 20}}>
          <View style={[style, {height: 100}]} />
          <View style={[style, {height: 120, left: 155}]} />
          <View style={[style, {height: 190, top: 110}]} />
          <View style={[style, {height: 120, left: 155, top: 130}]} />
          <View style={[style, {height: 190, left: 155, top: 260}]} />
          <View style={[style, {height: 80, top: 310}]} />
          <View style={[style, {height: 280, top: 400}]} />
          <View style={[style, {height: 300, left: 155, top: 460}]} />
        </ScrollView>
      </View>
    );
  }
}

【问题讨论】：

只是一个关于您写的评论的简短问题：“我不认为使用 flexbox 可以做到这一点” - 你为什么认为这是不可能的？您的示例非常基本，因此我可能忽略了一些细微差别/边缘情况，但我的第一个想法是这是可行的。
@MichaelCheng。对于SO post，我没有看到任何纯 flexbox 解决方案，所以认为这是不可能的。垂直 1 列很容易。我没想到要像大卫的解决方案那样真正拆分列。
大卫的回答正是我在想如何解决它的问题，但如果事实证明你使用绝对定位来处理某些特殊问题，我不想花时间写这个答案原因。很高兴看到他的解决方案正是您想要的。

标签： react-native

【解决方案1】：

使用 flexDirection: 'row'，这个问题很容易解决。在Expo 测试。

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

const { width, height } = Dimensions.get('window');
const gutterSize = 10;
const columns = 2;
const colWidth = (width / columns) - (gutterSize * columns) + (gutterSize / 2);
const style = {width: colWidth, height: 100, backgroundColor: '#0f0', marginLeft: gutterSize, marginTop: gutterSize};

export default class App extends Component {

  render() {
    return (
      <View style={{height: height, backgroundColor: '#00f'}}>
        <ScrollView style={{backgroundColor: '#f00', width: width, top: 20}}>
          <View style={{flexDirection: 'row'}}>
            <View>
              <View style={[style, {height: 100}]} />
              <View style={[style, {height: 110}]} />
              <View style={[style, {height: 120}]}/>
              <View style={[style, {height: 130}]} />
            </View>
            <View>
              <View style={[style, {height: 140}]} />
              <View style={[style, {height: 90}]}/>
              <View style={[style, {height: 150}]}/>
              <View style={[style, {height: 270}]}/>
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }
}

【讨论】：

【解决方案2】：

我通过添加弹跳道具并将其设置为 false 来解决它：

<ScrollView bounces={false}></ScrollView>

【讨论】：