React Native android 应用中的慢速动画

Question

我正在使用 redux 和 react-native 并且在一页上我使用了 FlatList 和一些使用 Animated.new() 的动画。同样在他的应用程序中，我正在使用反应导航，但我的应用程序的 UI 动画非常慢。原因之一是该列表有数百个。我试图通过使用 getItemLayout 来增强 FlatList 的性能，但尽管相同的代码在 ios.

上工作效率很高，但应用程序仍然表现得很慢

我经历了以下 URL： 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}
                />

Answer 1

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

Answer 2

为每个列表项创建 PureComponent 帮助我提高了列表性能。但是有些人建议使用 ListView 而不是 FlatList 但我没有尝试过。关注以下 URL 了解更多详情：

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

React Native android 应用中的慢速动画

Slow animations in ReactNative's android app

react-native

react-redux

react-native-android

react-native-navigation

react-native-flatlist