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

Posted 2021-04-18

我正在使用带有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}
                />

答案

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

另一答案

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

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