基本react-native app中的高内存消耗

问题描述 投票:2回答:1

我正在做我的第一反应原生,并且我认为这很容易,但事实证明我很难理解我可能做错了什么。

首先,我有一个非常简单的应用程序,它通过redux获取数据

componentWillMount() {

    this.props.fetchCoin()
    this.props.CurrencyRate()
  }

然后在其返回部分中呈现此内容

 return (
     <ScrollView>
                 <Header />
                 {/* Custom Search Input */}
                 <View>
                 <TextInput
                  style={textInput}
                  placeholder="Search Coin"
                  onChangeText={(text) => this.onSearch(text)} />
                  </View>
                  <View>
                  <FlatList
                   data={this.state.searchCoin ? displaySearchCrypto : this.props.cryptoLoaded}
                   renderItem={({ item }) => (
                   <CoinCard
                      key={item["long"]}
                      coinShortName = {item["short"]}
                      coinName = {item["long"]}
                      coinPrice = {item["price"].toFixed(2)}
                      marketCap = {(item["mktcap"]/1000000000).toFixed(4)}
                      percentChange = {item["perc"].toFixed(2)}
                      vwapData={item["vwapData"].toFixed(2)}
                      coinImage={"https://coincap.io/images/coins/" + item["long"] + ".png"}
                      />
                  )}
          />
          </View>
               </ScrollView>
           )
      }
    }

我看到我的ram消耗量大于500 MB,即使应用程序已经获取数据和UI线程坚持到60(fps)我觉得UI中没有任何东西发生

而不是共享我的所有代码:你可以在github上找到大部分内容上面的代码段是从这里共享的:https://github.com/irohitb/Crypto/blob/master/src/container/cryptoContainer.js

上面代码中的CoinCard组件可以在这里看到:https://github.com/irohitb/Crypto/blob/master/src/components/CoinCard.js

同样的行动在这里:https://github.com/irohitb/Crypto/blob/master/src/actions/cryptoAction.js

[问题:]有人可以帮我找出我做错了什么,我该如何解决?如果有人想要This repositorytry it out应该在你的模拟器上工作而不会抛出错误。 enter image description here

javascript reactjs react-native
1个回答
2
投票

FlatListImage在Android上有一个未解决的问题:https://github.com/facebook/react-native/issues/13413。这里有一些关于性能的提示:https://github.com/filipemerker/flatlist-performance-tips/

作为第一次尝试修复,尝试将removeClippedSubviews添加到您的FlatList,尽管这需要权衡。

我还在屏幕截图中注意到您收到有关丢失密钥的警告。解决这个问题,并尝试keyExtractor,看看是否有所改善。

或者,使用FlatList以外的其他东西,例如ScrollView。您将失去FlatList的一些功能,但如果您获得可接受的内存使用和性能,则可能是值得的。

© www.soinside.com 2019 - 2024. All rights reserved.