时间戳

首页 > 解决方案 > React Native Flat List 数据更改渲染

javascript - React Native Flat List 数据更改渲染

问题描述

我有一个平面列表。我在此链接中应用了技巧https://github.com/filipemerker/flatlist-performance-tips

当用户滚动列表时，我正在更新新项目的数据。但是在更新数据的时候，列表有点慢，还有一些bug。我尽可能使用纯组件。我能为此做些什么。顺便说一句，我想在列表末尾添加加载（活动指示器）。我该怎么做，你能给一个例子或链接。

如果你帮助我会很高兴谢谢你。

标签： javascriptreactjsreact-nativemobilereact-native-android

解决方案

React Native 纯组件实现了一个带有浅同情的 shouldComponentUpdate。您可以通过shouldComponentUpdate在Component.

shouldComponentUpdate(nextProps, nextState) {
      return this.props.name !== nextProps.name;
    }

要添加活动指示器，请使用ListFooterComponentFlatList 的道具。例如 ：

footerLoadingIndicator = () => {
return (
  <View style={styles.footerContainer}>
      <Progress.CircleSnail
          size={30}
          thickness={2.5}
          direction={'clockwise'}
          duration={400}
          color={'#22a790'}
        />
  </View>
);

我使用了第三方指标。您可以将其替换为AcitivityIndicator

推荐阅读