ネイティブ之SectionListを反応させます

1を接続します。

/pages/SectionListDemo.js

エクスポートデフォルトクラスSectionListDemoは、コンポーネント{延び
  コンストラクタ（小道具）{ 
    スーパー（小道具）。この


    .state = { 
      isLoading：偽、
      dataArray：CITY_NAME 
    } 
  } 

  loaddataの（リフレッシュ）{ 
    場合（リフレッシュ）{
       この.setState（{ 
        isLoading：真
      }）。
    } 

    のsetTimeout（（） => { 
      dataArrayはせ = [];
       場合リフレッシュ（）{
         ための（iは=せ、この .state.dataArray.length-1; I> = 0; i-- ）{ 
          dataArray.push（本。 state.dataArray [I]）; 
        } 
      } 
      他{
        dataArray = この.state.dataArray.concat（CITY_NAME）。
      } 

      この.setState（{ 
        dataArray：dataArray、
        isLoading：偽
      }）
    }、 2000 ）。
  } 

  genIndicator（）{ 
    リターン <ビュースタイル= {styles.indicatorContainer}> 
      < ActivityIndi​​catorの
        スタイル = {styles.indicator} 
        サイズ = { '大きい' } 
        アニメーション = { 真}
       /> 
      <テキスト>正在加载更多</テキスト> 
    </表示>   } 
  _renderItem（データ）{


    戻り <ビュースタイル= {styles.item}> 
          <テキストスタイル= {styles.text}> {data.item} </テキスト> 
    </表示>   } 
  _renderSectionHeader（{セクション}）{ リターン <ビュースタイル= {スタイル。 sectionHeader}> 
        <テキストスタイル= {styles.textは}> {section.title} </テキスト> 
    </ビュー>   } 
  レンダリング（）{ リターン（
       <表示> 
        < SectionList 
          セクション = {CITY_NAME} 
          のRenderItem = {（データ）= > この._renderItem（データ）}
           // リフレッシュ= {this.state.isLoading} // onRefresh = {（）=> { //


    


    
          
             this.loadData（）; 
          // }} 
          // これは上記使用できないリフレッシュの外観をカスタマイズする次の使用に 
          refreshControl = {
             < RefreshControlの
              タイトル = { '...と' } 
              色 = {[ '赤']} // この無効色 
              tintColor = { 'オレンジ' } 
              titleColor = { 'レッド'} // のみ有効IOS 

              リフレッシュ = { この.state.isLoading} 
              OnRefresh = {（）=> {
                 この（.loadData 真の）; 
              }}
             />
          } 
          ListFooterComponent = {（）=> この .genIndicator（）} // 上拉加载更多视图 
          onEndReached = {（）=> {
             この.loadData（）
          }} 
          renderSectionHeader = {（データ）=> この._renderSectionHeader（データ）}


         /> 
      </ビュー>       ）。
  } 
} 
CONSTスタイル = StyleSheet.create（{ 
  コンテナ：{ 
    フレックス： 1 、
    alignItems： '中央' 、
    のbackgroundColor： '＃1 F5FCFF' 
  }、
    のbackgroundColor：

 
  アイテム：{ '＃168' 、
    高さ： 200 、
    marginRight： 15 、
    marginLeft： 15 、
    marginBottom： 15 、
    alignItems： '中央' 、
     // justifyContetnt： '中央' 


  }、
  テキスト：{ 
    色： '白' 、
    のfontSize： 20 、
  }、
  indicatorContainer：{ 
    alignItems： '中央' 
  }、
  指示薬：{ 
    色： '赤' 、
    マージン： 10 
  }、
  sectionHeader：{ 
    高さ 50、
    のbackgroundColor： '＃198' 、
    alignItems： '中央' 
  } 

}）

コードの表示

レンダリング：