ios - 仅来自平面列表 iOS 的 React-Native 巨大内存使用和崩溃
<p><p>我的应用程序从服务器获取数百个项目，然后将这些数据加载到平面列表 5 项目 x 5 项目 onEndReached 中。但是，当我尝试滚动几十个项目时，我的应用不再响应 onPress(在平面列表之外)，并且内存使用量开始激增导致崩溃:</p>
<p> <a href="/image/C6mJo.png" rel="noreferrer noopener nofollow">Click here to see image of memory usage</a> </p>
<p>我尝试了所有方法，从使用 getItemLayout、PureComponent、maxToRenderPerBatch、windowSize，我从我的项目中删除了所有图像，所有图像都是可触摸的，但仍然无法解决这个问题。</p>
<p>我当然是在 Release模式下运行我的应用程序。</p>
<p>我不知道如何解决这个问题，因为它只发生在 iOS 上，而且我对 iOS 开发人员知之甚少(我是一个 android 人......)。</p>
<p>这是我的商品的代码:</p>
<pre><code>import React, { PureComponent } from 'react';
import {
View, Text, TouchableOpacity, StyleSheet, Image, ImageBackground, FlatList
} from 'react-native';
import globalStyle from '../globalStyle';
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import consts from '../utils/consts';
import { formatDistance, formatPriceRange, parseTime, formatTime } from '../utils/utils';
import ItemOffer from './ItemOffer';
import Offer, { STATE_ENUM } from '../entities/Offer';
import LinearGradient from 'react-native-linear-gradient';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { AppEventsLogger } from 'react-native-fbsdk';
export default class ItemShop extends PureComponent {
constructor(props) {
super(props);
this.state = {
shopIdx: this.props.shopIdx,
liked: this.props.liked,
selectedOfferIdx: 0,
currentOffer: this.props.offers,
offers: this.props.offers
};
}
render() {
return (
<View style={{marginTop: 5, marginBottom: 10,
alignItems:"stretch", marginLeft: 10,
marginRight: 10, overflow: "hidden", backgroundColor: "transparent", height: 300}}>
<TouchableOpacity
onPress={() => {
this.props.onPressShop(this.state.shopIdx);
}}
>
<View
style={{flexDirection: "row", justifyContent: "space-between", alignItems:"center", height: 50, backgroundColor: globalStyle.colors.bg}}>
<View>
<Text style={}>{this.props.name}</Text>
<Text style={globalStyle.style.p}>{this.props.food} - {formatPriceRange(this.props.price)} </Text>
</View>
<View style={{flexDirection: "row", alignItems:"center"}}>
<Text style={}>{formatDistance(this.props.distance)}</Text>
<MaterialCommunityIcon name={'map-marker-radius'} size={20} color={globalStyle.colors.darkGray} />
</View>
</View>
</TouchableOpacity>
</View>
);
}
}
</code></pre>
<p>我的平面列表的代码:</p>
<pre><code> <FlatList
ref={(ref)=> this.shopList = ref }
data={this.state.shops}
initialNumToRender={4}
onScrollBeginDrag={() => {
this.setState({dragging: true});
}}
onScrollEndDrag={() => {
this.setState({dragging: false});
}}
getItemLayout={(data, index) => (
{length: 315, offset: 315 * index, index}
)}
onEndReached={this.loadMore}
renderItem={this.renderItem}
refreshControl={
<RefreshControl
refreshing={Platform.OS === 'ios' ? false : this.state.loading}
onRefresh={this.getShops}
tintColor={Platform.OS === 'ios' ? "transparent" : globalStyle.colors.orange}
/>
}
/>
</code></pre>
<p>如果需要，还有我的 renderItem 函数的代码:</p>
<pre><code>renderItem = ({item, index}) => (
<ItemShop
onPressShop={this.onPressShop}
onPressWiniit={this.toggleModal}
onPressLike={this.onPressLike}
distance={item.distance}
shopIdx={index}
name={item.NAME}
food={item.FOOD}
price={item.PRICE_RANGE}
offers={item.OFFERS}
liked={item.liked}
/>
);
</code></pre>
<p>但是，如果将我的 ItemShop 渲染函数更改为以下内容，它可以工作:</p>
<pre><code>render() {
return (
<View style={{marginTop: 5, marginBottom: 10,
alignItems:"stretch", marginLeft: 10,
marginRight: 10, overflow: "hidden", backgroundColor: "transparent", height: 300}}>
<Text style={}>{this.props.name}</Text>
</View>
);
}
</code></pre>
<p>我真的可以在这里使用帮助或确认为错误，因为我的截止日期真的很快:(</p>
<p>谢谢!</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>我认为您可以尝试以下步骤:
1.使用调试器工具分析内存堆，并尝试找出堆中保留的内容
2.为你的flatlist指定一个静态<code>keyExtractor</code>(item.id or item.name)来提高性能</p></p>
<p style="font-size: 20px;">关于ios - 仅来自平面列表 iOS 的 React-Native 巨大内存使用和崩溃，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/51390389/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/51390389/
</a>
</p>
页:
[1]