React NativeのScrollViewプルダウンリフレッシュ効果

'react' から React,{Component} をインポートします。
輸入 {
    ビュー、
    文章、
    スタイルシート、
    スクロールビュー、
    リフレッシュコントロール、
    寸法
} から 'react-native';

const screenW=Dimensions.get('window').width;

デフォルトクラスCKRefreshはComponentを拡張します{
    コンストラクタ（）{
        素晴らしい（）;
        this.state={
            rowDataArr:Array.from(新しいArray(30)).map((値,インデックス)=>({
                タイトル:「データの初期化」+インデックス
            })）、
            //読み込みを表示するかどうか
            リフレッシュ中:false、
            読み込まれました:0
        }
    }

    与える（）{
        const rowsArr=this.state.rowDataArr.map((row,index)=>(<行データ={row} キー={index}/>))
        戻る（
            <スクロールビュー
                リフレッシュコントロール={
                    <リフレッシュコントロール
                        リフレッシュ中 =​​ {this.state.isRefreshing}
                        onRefresh={()=>this._onRefresh()}
                        colors={['赤','緑','青']}
                        title="読み込み中..."
                    />
                }
            >
                {行数}
            </スクロールビュー>
        ）
    }

    _onRefresh(){
        //1. インジケーターを表示する this.setState({
            リフレッシュ中:true
        });
        //2. データの読み込みをシミュレートする setTimeout(()=>{
            newDataArr=Array.from(new Array(5)).map((value,index)=>({
                title:「私はプルダウンされたデータです」+(this.state.loaded+index)
            })).concat(this.state.rowDataArr);
            //ステートマシンを更新 this.setState({
                行データ配列:新しいデータ配列、
                リフレッシュ中:false、
                ロード済み: this.state.loaded+5
            });
        },2000);
    }
}

クラス Row は Component を拡張します {
    静的デフォルトプロパティ = {
        データ：{}
    };
    与える（）{
        戻る（
            <表示スタイル={{
                幅:画面W、
                高さ:40,
                ボーダー下幅:1,
                borderBottomColor:'赤',
                コンテンツを中央揃えにする:'center'
            }}>
                <テキスト>{this.props.data.title}</テキスト>
            </表示>
        ）
    }
}

const スタイル = StyleSheet.create({

})

/**
 * サンプルReact Nativeアプリ
 * https://github.com/facebook/react-native
 *
 * @フォーマット
 * @flow 厳密なローカル
 */

'react' から React をインポートします。
輸入 {
  セーフエリアビュー、
  スタイルシート、
  スクロールビュー、
  ビュー、
  文章、
  ステータスバー、
} から 'react-native';

輸入 {
  ヘッダ、
  詳細情報リンク、
  色、
  デバッグ手順、
  再ロード手順、
} 'react-native/Libraries/NewAppScreen' から;

'./components/CKRefresh' から CKRefresh をインポートします。
const アプリ: () => React$Node = () => {

  戻る （
    <>
      <ステータスバー barStyle="dark-content" />
      <セーフエリアビュー スタイル = {styles.mainViewStyle}>
      <CKリフレッシュ/>
      </セーフエリアビュー>
    </>
  );
};


const スタイル = StyleSheet.create({
  メインビュースタイル:{
      フレックス:1,
      背景色:'#fff',
  }
});



デフォルトのアプリをエクスポートします。