ScrollView與內部的元件如何在滑動時做出定格效果

發表於   |   分類於   |  

先承認被這個問題搞了一整天，想要自幹圖表真不容易。

想要做的是圖表在左右滑動時能夠依照內部元件的寬度定格，不會有圖表直條圖被邊界卡一半的情形，例如：

ScrollView滑動定格效果

snapToAlignment與snapToInterval兩個ScrollView的props，這兩個必須搭配使用才會生效。
snapToAlignment是ScrollView下的Component的對齊設定，預設為start，以垂直vertical來說就是最上方，以水平horizontal就是最左邊。
snapToInterval則是定格的間隔，其實就是每個間隔的寬度或高度，依照水平或垂直決定。以下面這個範例來說，每個直條寬度是21，外加marginRight的值是2，所以每個格子的寬度總共是21+2=23，因此snapToInterval的值就是23。這樣在滑動之後就會以一個直條圖為單位滑動。如果想要三個直條圖為一格單位，那麼snapToInterval的值就是23*3=69，以此類推。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React, { Component } from 'react';
import {
  View,
  Text,
  ScrollView,
  ListView,
  Dimensions
} from 'react-native';
import * as _ from 'lodash';
export default class Chart extends Component {
  renderBars(height) {
    return _.range(25, 90).map((value, index) => {
      return (
        <View key={index} style={{position: 'relative'}}>
          <View style={{width: 21, opacity: 0.2, backgroundColor: '#ff2d2d', marginRight: 2, height: height - 20 - value}} />
          <View style={{width: 21, backgroundColor: '#ff2d2d', marginRight: 2, height: value}} />
          <View style={{alignItems: 'center', marginTop: 3}}>
            <Text style={{fontSize: 8}}>10/13</Text>
            <Text style={{fontSize: 8}}>三</Text>
          </View>
        </View>
      )
    })
  }
  render() {
    const height = 148;
    return (
      <View>
        <View style={{flex: 1, alignItems: 'center'}}>
          <ScrollView
            horizontal
            snapToAlignment={'start'}
            snapToInterval={23}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
            alwaysBounceVertical={false}
            directionalLockEnabled
            style={{marginTop: 20, position: 'relative', height: height, width: 23*15}}>
            {this.renderBars(height)}
          </ScrollView>
        </View>
      </View>
    )
  }
}