Question

我正在使用 redux 与 react-native ，并且在一个页面上我使用了 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}
                />

Answer 1

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

Answer 2

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

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

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

2 个答案: