在ReactNative的Android应用程序中缓慢动画

问题描述 投票:1回答:2

我正在使用带有react-native的redux,在一个页面上我使用了FlatList和一些使用Animated.new()的动画。同样在他的应用程序中我使用反应导航但我的应用程序的UI动画非常慢。一个原因是列表数百。我试图通过使用getItemLayout来增强FlatList性能,但仍然应用程序表现得非常慢,尽管相同的代码在ios上工作效率很高。

我已经浏览了以下网址:https://facebook.github.io/react-native/docs/performance.html

任何人都可以指导我如何在这里提高性能?

编辑:

添加getItemLayout和onEndReachedThreshold后性能得到改善,但抽屉图标仍然无响应。

<FlatList
                    refreshControl={
                        <RefreshControl
                            refreshing={this.props.gameList.get('isFetching')}
                            onRefresh={()=>{
                                this.props.getGameList()
                            }}/>}
                    getItemLayout={this.getItemLayout}
                    contentContainerStyle={styles.gameListContent}
                    data={gameListData}
                    keyExtractor={this.keyExtractor}
                    renderItem={props=>this.renderItem({...props, isFirst: props.index === 0, isLast: props.index === gameListData.length-1})}
                    ItemSeparatorComponent={this.renderSeparator}
                    initialNumToRender={25}
                    onEndReachedThreshold={0.5}
                />
react-native react-redux react-native-android react-native-flatlist react-native-navigation
2个回答
0
投票

为了提高FlatLsit的性能,在初始渲染时通过切片10到15将数据传递给它,并且在scrollUp事件中传递所有数据,因为它加载了我们在setInitilaItemToRender中指定的更多数据,因为它多次触发onEndReached事件。


0
投票

为每个列表项创建PureComponent帮助我提高了列表性能。然而有些人建议使用ListView而不是FlatList,但我没有尝试。请按照以下URL获取更多详细信息

https://github.com/facebook/react-native/issues/13649

© www.soinside.com 2019 - 2024. All rights reserved.