Question

我想创建一个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>
    );
  }
}

Answer 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>
    );
  }
}

Answer 2

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

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

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

2 个答案: