【React Native】文件翻譯閱讀紀錄 - Components(組件) - RefreshControl

by - 上午9:00

Facebook Open Source React Native


RefreshControl

此組件在ScrollView或ListView中使用,以添加pull to refresh功能。當ScrollView處於scrollY:0時,向下滑動會觸發onRefresh事件。

用法示例

class RefreshableList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
    };
  }

  _onRefresh = () => {
    this.setState({refreshing: true});
    fetchData().then(() => {
      this.setState({refreshing: false});
    });
  }

  render() {
    return (
      <FlatList
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
          />
        }
        ...
      />
    );
  }
  ...
}
注意:刷新是一個受控的道具,這就是為什麼它需要在onRefresh函數中設置為true,否則刷新指示器將立即停止。

Props


參考

Props

refreshing

視圖是否應指示活動刷新。
TYPEREQUIRED
boolYes

onRefresh

視圖開始刷新時調用。
TYPEREQUIRED
functionNo

colors

將用於繪製刷新指示符的顏色(至少一個)。
TYPEREQUIREDPLATFORM
array of colorNoAndroid

enabled

是否啟用了pull to refresh功能。
TYPEREQUIREDPLATFORM
boolNoAndroid

progressBackgroundColor

刷新指示器的背景顏色。
TYPEREQUIREDPLATFORM
colorNoAndroid

progressViewOffset

進度視圖頂部偏移
TYPEREQUIREDPLATFORM
numberNoAndroid

size

刷新指示符的大小,請參見RefreshControl.SIZE。
TYPEREQUIREDPLATFORM
enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE)NoAndroid

tintColor

刷新指示器的顏色。
TYPEREQUIREDPLATFORM
colorNoiOS

title

刷新指示下顯示的標題。
TYPEREQUIREDPLATFORM
stringNoiOS

titleColor

標題顏色。
TYPEREQUIREDPLATFORM
colorNoiOS



You May Also Like

0 意見