[RN] React Native FlatList跳转到顶部/底部

Z时代
2024-01-10
分类：综合

react

React Native FlatList跳转到顶部/底部

核心代码如下：

<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.container}
                //下拉刷新 ,有 ScrollView 需要加载ScrollView，无则加到 FlatList
                        refreshControl={
                            <RefreshControl
                                refreshing={this.state.isRefreshing}
                                onRefresh={this._onRefresh.bind(this, 0)}
                            />
                        }
            >
                <FlatList
                    ref={(flatList)=>this._flatList = flatList}
                    data={this.state.data}
                    style={styles.flatList}
                    keyExtractor={this._keyExtractor}
                    renderItem={this._renderItem.bind(this)}
                    ItemSeparatorComponent={this._itemDivide}
                    ListEmptyComponent={this._renderLoadEmpty.bind(this)}
                    //上拉加载
                    ListFooterComponent={this._renderFooter.bind(this)}
                    onEndReached={this._onEndReached.bind(this)}
                    onEndReachedThreshold={0.2}
                />
                <ActionButton
                    size={30}
                    buttonColor="#ccc"
                    onPress={() => {
                        this._flatList.scrollToOffset({animated: true, viewPosition: 0, index: 0}); //跳转到顶部
                        // this._flatList.scrollToEnd();  //跳转到底部
                    }}
                    renderIcon={() => (<View style={styles.actionButtonView}>
                        <Iconfont name="icon-shouqijiantouxiao" size={24} style={styles.actionButtonIcon}/>
                    </View>)}
                />
            </ScrollView>