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