滾動組件 >=v1.0.0
一個包裝了平臺的（滾動視圖）的組件，同時還集成了觸摸鎖定的“響應者”系統。
記住必須有一個確定的高度才能正常工作，因為它實際上所做的就是將一系列不確定高度的子組件裝進一個確定高度的容器（通過滾動操作）。
要給一個確定一個高度的話，要么直接給它設置高度（不建議），要么確定所有的父容器都已經綁定了高度。
在視圖棧的任意一個位置忘記使用{flex:1}都會導致錯誤，你可以使用元素查看器來查找問題的原因。
使用說明基本用法
提供一個縱向滾動區域，該區域必須是有一個確定高度才能正常工作。
滾動內容
橫向滾動
組件可以提供一個橫向滾動區域，只需要將 屬性設置為 true 即可。
滾動內容
圖片輪播
在 屬性中設置為true，即可實現一個簡單的圖片輪播或者分頁效果。
{
new Array(15).fill('').map((item, index) =>
縱向滾動{index}
)
}
下拉刷新和加載更多
組件提供了上拉加載更多和下拉刷新的功能，分別在 和 屬性中傳入 和 組件即可，該功能只支持縱向滾動。
另外，當 組件從 狀態切換到其他狀態時，你需要手動調用 實例的 方法來切換。同理，對于 組件刷新失敗時也需要手動調用 this..({ : false }) 方法來切換狀態。
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { ScrollView, RefreshControl, LoadControl } from 'qunar-react-native';
export default class Demo extends Component {
constructor(props) {
super(props);
this.scroller = null;
this.state = {
listData: getCoupleOfRandomColor(20),
noMore: false
};
}
onRefresh() {
setTimeout(() => {
if (Math.random() > 0.5) {
this.scroller.stopRefreshing({
result: true
});
this.setState({
listData: getCoupleOfRandomColor(20),
noMore: false
});
} else {
this.scroller.stopRefreshing({
result: false
});
}
}, 1000);
}
onLoad() {
setTimeout(() => {
if (this.state.listData.length >= 40) {
this.setState({
noMore: true
});
this.scroller.stopLoading();
} else {
this.setState({
listData: this.state.listData.concat(getCoupleOfRandomColor(20))
});
this.scroller.stopLoading();
}
}, 1000);
}
render() {
const { listData, noMore } = this.state;
const listContent = listData.map((item, index) => (
{index}
));
return (
{
this.scroller = ref;
}}
style={{ flexGrow: 1, flexShrink: 1 }}
refreshControl={
this.onRefresh()}/>
}
loadControl={
this.onLoad()}
/>
}
>
{listContent}
)
}
}
const getCoupleOfRandomColor = num => {
const colors = [];
for (let i = 0; i < num; i++) {
colors.push(getRandomColor());
}
return colors;
};
const getRandomColor = () => {
const letters = '3456789ABC'.split('');
let color = '#';
for (let i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 10)];
}
return color;
};
滾動特性
組件不僅提供了滾動容器，也提供了相關的滾動特性。
滾動內容
滾動到某一位置
組件提供了 () 方法來滾動到某個位置。
滾動內容
this.refs.scroller.scrollTo({ y: 100 });
在 屬性中設置一個子視圖下標的數組，決定哪些成員會在滾動之后固定在屏幕頂端。
{
new Array(100).fill('').map((item, index) =>
{index}
)
}
屬性 =={ }==
內容范圍相對滾動視圖邊緣的坐標。
默認值:
=={ }==
用來手動設置初始的滾動坐標。
默認值:
al =={ bool }==
當此屬性為true時解決輪播圖片加載問題，水平方向即使內容比滾動視圖本身還要小，也可以彈性地拉動一截。
默認值: 當={true}時默認值為true，否則為false。
=={ bool }==
當此屬性為true時，垂直方向即使內容比滾動視圖本身還要小，也可以彈性地拉動一截。
默認值: 當={true}時默認值為false，否則為true。
=={ bool }=={.type} >=v1.1.0
當值為true時，如果內容范圍比滾動視圖本身大，在到達內容末尾的時候，可以彈性地拉動一截。如果為false，尾部的所有彈性都會被禁用，即使*屬性為true。默認值為true。
默認值: true
e =={ View..style }==
內容容器的樣式，所有的子視圖都會包裹在內容容器內。
=={ |'fast'|'' }==
一個浮點數，用于決定當用戶抬起手指之后進行慣性滾動時，滾動視圖減速停下的速度。為0.998，fast為0.9。
默認值: ''（即：0.998）
=={ bool }==
水平滾動。當該屬性為true的時候，所有的的子視圖會在水平方向上排成一行，而不是默認的在垂直方向上排成一列。
默認值: false
=={ }==
(event) => void
在滾動的過程中，每幀調用一次此回調函數。
如果使用了組件，則y包含組件的高度。即：在頂部時，正常是 {: {y: 0}}，如果有組件，則為 {: {y: 35}} （35為的默認高度）。
方法參數:
參數名類型描述支持版本
event
obj
{: {: {x: , y: }}
=={ }==
(event) => void
當滾動動畫結束之后調用此回調。
方法參數:
參數名類型描述支持版本
event
obj
{: {: {x: , y: }}
=={ bool }==
當值為true時，滾動條會停在滾動視圖的尺寸的整數倍位置。這個可以用在水平或垂直的分頁上。默認值為false。
注意：當使用屬性的時候，不允許在非方向上使用 * 屬性。即：當 為 true， 為 true 的時候，不允許使用 ；當 為 flase， 為 true 的時候，不允許使用 al
默認值: false
=={ bool }==
當值為false的時候，內容不能滾動，默認值為true。
默認值: true
=={ bool }==
當此屬性為true的時候，顯示一個水平方向的滾動條。
默認值: false
=={ bool }==
當此屬性為true的時候，顯示一個垂直方向的滾動條。
默認值: true
=={ array[] }==
一個子視圖下標的數組，用于決定哪些成員會在滾動之后固定在屏幕頂端。舉個例子，傳遞={[0]}會讓第一個成員固定在滾動視圖頂端。這個屬性不能和={true}一起使用。
=={ enum('none', 'on-drag') }=={.type} >=v1.2.0
用戶拖拽滾動視圖的時候，是否要隱藏軟鍵盤。none(默認值)，拖拽時不隱藏軟鍵盤。on-drag，當拖拽開始的時候隱藏軟鍵盤。
默認值: 'none'
tTaps =={ .bool }=={.type} >=v1.3.0
默認值為true（默認值與rn不一樣，主要是為了兼容之前的版本）。當此屬性為true的時候，在軟鍵盤激活之后，點擊焦點文本輸入框以外的地方，鍵盤不會自動消失。當此屬性為false的時候，在軟鍵盤激活之后，點擊焦點文本輸入框以外的地方，鍵盤就會隱藏。
注：該屬性的默認值與官方相反，默認在點擊其他區域時不會收起鍵盤。同時，該屬性的表現也與官方有區別：官方版本，在點擊其他區域時會首先收起鍵盤，再次點擊才會觸發對應的操作；qrn的版本，在點擊其他區域時會同時收起鍵盤，觸發對應的操作。 比如：頁面上有輸入框和『提交』按鈕時，鍵盤彈起時點擊按鈕：官方版本會收起鍵盤，再次點擊按鈕才會觸發按鈕的點擊事件；qrn版本在第一次點擊『提交』按鈕時就會收起鍵盤并且觸發按鈕的點擊事件。
默認值: true
n =={ }=={.type} >=v1.2.0
(event) => void
慣性滾動開始時的回調。
方法參數:
參數名類型描述支持版本
event
obj
{: {: {x: , y: }}
=={ }=={.type} >=v1.2.0
(event) => void
慣性滾動結束時的回調。
方法參數:
參數名類型描述支持版本
event
obj
{: {: {x: , y: }}
{ } >=v1.2.0
(event) => void
拖拽滾動開始時的回調。
方法參數:
參數名類型描述支持版本
event
obj
{: {: {x: , y: }}
=={ }=={.type} >=v1.2.0
(event) => void
拖拽滾動結束時的回調。
方法參數:
參數名類型描述支持版本
event
obj
{: {: {x: , y: }}
=={ }==
指定組件，用于為提供下拉刷新功能。
=={ }==
指定組件，用于為提供上拉加載功能。
=={ }==
(width, ) => void
內容容器時觸發，所有的子視圖都會包裹在內容容器內。
方法參數:
參數名類型描述支持版本
width
內容容器寬度
內容容器高度
style =={ View..style }==
的樣式。
方法
滾動到某一位置，如果只在某一方向滾動解決輪播圖片加載問題，可以只傳{x: x}或{y: y}。默認為true。
如果使用了組件，則y需要包含組件的高度。即：滾動到頂部，正常是 ({y: 0})，如果有組件，則 ({y: 35}) （35為的默認高度）。
方法參數:
參數名類型描述必選支持版本
obj
滾動配置
.x
橫向位移
.y
縱向位移
.
bool
是否動畫
.
動畫時長
1.3.0
當前組件有屬性，并且沒有正在下拉刷新，則強制觸發下拉刷新，變成正在刷新的狀態
當前組件有屬性，并且正在下拉刷新，則停止下拉刷新的狀態。默認帶有動畫，可以設置{: false}取消。
停止刷新時，會自動頂部，所以不需要外部再調用。滾動到頂部的過程中，會禁止響應。
方法參數:
參數名類型描述必選支持版本
obj
停止刷新時的配置項
.
bool
回到頂部是否需要動畫
.
回到頂部的動畫時間，默認是300ms
1.3.0
.
bool
表示刷新成功還是失敗。：不顯示刷新之后的狀態；true：顯示『加載成功』；false：顯示『加載失敗』
1.3.0
當前組件有屬性，并且沒有正在加載，則強制觸發加載更多，變成正在加載更多的狀態
當前組件有屬性，并且正在加載，則停止加載更多的狀態
本方法用來設置相對當前的偏移多少，在下一次的時候會生效。本方法的主要使用場景是，當滾動內容的高度發生變化時（尤其是變小時），希望之后，用戶看到的內容位置是不變的。
方法參數:
參數名類型描述必選支持版本
設置相對當前的位移量