ReactNative 的 android 应用程序中的慢动画答案

【问题标题】：Slow animations in ReactNative's android appReactNative 的 android 应用程序中的慢动画
【发布时间】：2018-02-22 13:07:37
【问题描述】：

我将 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}
                />

【问题讨论】：

你有没有把你尝试过的动画放在原生驱动上？ facebook.github.io/react-native/docs/…
如果列表很小，那么动画效果会好得多。 fps 降低 2 或 -2
如果你有 500 条记录，我会将前 25 条加载到 FlatList 中，当我滚动到底部时，再加载 25 条。当您到达第 20 项时，使用 onEndReachedThreshold={5}，它将加载更多。
@Dan 我试试这个。
@Dan 抽屉菜单有时无响应。您可以检查更新描述中附加的代码吗？谢谢

标签： react-native react-redux react-native-android react-native-flatlist react-native-navigation

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：