SectionList怎么实现下拉刷新上拉加载

Question

<SectionList
   renderSectionHeader={this._renderSectionHeader}
   renderItem={this._renderItem}
   sections={this.state.allMath}
   refreshing={false}
   initialNumToRender={1}
   onRefresh={()=>{alert("刷新")}}
   ItemSeparatorComponent={this._separatorCom}
   SectionSeparatorComponent={() => <View
       style={{height: 10, backgroundColor: 'blue'}}></View>}
   keyExtractor={(item,index)=>("index"+index+item)}
   onEndReached={(info)=>{alert("到达底部")}}
   onEndReachedThreshold={0}
   stickySectionHeadersEnabled={true}
/>

//刷新和加载的代码应写在哪里

Answer 1

CrazyCodeBoy 2018-02-28 09:46:09

1. 可以使用RefreshControl实现下拉刷新功能：

2. 使用onEndReached与onEndReachedThreshold属性来实现上拉加载的功能：

  <SectionList
    data={this.state.projectModels}
    renderItem={(data)=>this.renderRow(data)}
    // refreshing={this.state.isLoading}
    // onRefresh={()=>this.loadData()}
    keyExtractor={item=>item.item.id}
    ListFooterComponent={()=>this._renderFooter()}
    onEndReached={()=>this._onEndReached()}
    onEndReachedThreshold={1}
    refreshControl={
        <RefreshControl
            title='Loading...'
            titleColor={this.props.theme.themeColor}
            colors={[this.props.theme.themeColor]}
            refreshing={this.state.isLoading}
            onRefresh={()=>this.loadData()}
            tintColor={this.props.theme.themeColor}
        />
    }
/>

然后在loadData()中实现下拉刷新的逻辑，在_onEndReached()中实现上拉加载的逻辑即可；

• 提问者 qq_Y_353 #1

  非常感谢！

• 梨花雨凉 #2

  最终也没告诉大家上拉加载的方法，只抛出了个onEndReached和onEndReachedThreshold={1} 这里给1 不就一加载页面就执行那个函数了嘛