码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-05-22 15:43:02      阅读:987      评论:0      收藏:0      [点我收藏+]

标签:ref   name   false   htm   cto   nta   extract   component   kong   

 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

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

 

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

标签:ref   name   false   htm   cto   nta   extract   component   kong   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!