React Native의 RefreshContorl 드롭다운 새로 고침 튜토리얼

앱에 풀다운 로딩이 있다는 것을 알고 있으며, React Native에도 유사한 컨트롤이 있습니다. 이 글에서는 주로 React Native의 RefreshContorl 풀다운 새로 고침 사용을 소개합니다.

1. 속성 메서드

(1) 뷰가 새로 고쳐지기 시작할 때 onRefresh 함수가 호출됩니다.

(2) 상쾌한 bool 새로 고칠 때 뷰에 표시기가 표시되는지 여부와 현재 새로 고쳐지고 있는지 여부도 나타냅니다.

(3) colors [ColorPropType] 로딩 표시기의 색상을 설정하는 데 적합합니다.

(4)enabled bool 안드로이드 플랫폼이 적합합니다. 풀다운 새로고침 기능 사용 여부

(5) ProgressBackgroundColor ColorPropType 로딩 진행률 표시기의 배경색을 설정합니다

(6) size RefreshLayoutConsts.SIZE.DEFAULT 안드로이드 플랫폼에 적용 가능한 로딩 진행률 표시기의 크기

(7) TintColor ColorPropType iOS 플랫폼에 적용 가능 로딩 진행률 표시기의 색상을 설정합니다

( 8) title string iOS 플랫폼에서는 로딩 진행률 표시기 아래 제목 텍스트 정보를 설정하는 데 적용 가능합니다

2. 사용 방법

<ScrollView
    refreshControl={
     <RefreshControl
      refreshing={this.state.isRefreshing}
      onRefresh={this._onRefresh}
      tintColor="#ff0000"
      title="Loading..."
      titleColor="#00ff00"
      colors={[&#39;#ff0000&#39;, &#39;#00ff00&#39;, &#39;#0000ff&#39;]}
      progressBackgroundColor="#ffff00"
     />
    }
/>
 
_onRefresh() {
     this.setState({
       isRefreshing:true
     });
     
     var self = this;
     setTimeout(()=>{
 
      //加载数据
     },2000)
}

로딩 효과가 나타납니다.

관련 권장 사항:

mescroll.js 풀업 로딩 풀다운 새로 고침 구성 요소 상세 설명

dropload.js 플러그인 풀다운 새로 고침 및 풀업 로딩 방법

풀 구현 방법 -WeChat 애플릿 목록 분석

새로 고침 및 풀업 로딩

위 내용은 React Native의 RefreshContorl 드롭다운 새로 고침 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!