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

Posted 2021-12-02 wukong1688

 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>

 

其中漂浮按钮用 react-native-action-button   的 ActionButton

 

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/10906004.html

转载请著名出处！谢谢~~