ios - 仅来自平面列表 iOS 的 React-Native 巨大内存使用和崩溃
问题描述
我的应用程序从服务器获取数百个项目,然后将这些数据加载到平面列表 5 项目 x 5 项目 onEndReached 中。但是,当我尝试滚动几十个项目时,我的应用程序不再响应 onPress (在平面列表之外),并且内存使用量开始爆炸导致崩溃:
我尝试了一切,从使用 getItemLayout、PureComponent、maxToRenderPerBatch、windowSize,我从我的项目中删除了所有图像,所有图像都是可触摸的,但仍然无法解决这个问题。
我当然是在发布模式下运行我的应用程序。
我不知道如何解决这个问题,因为它只发生在 iOS 上,而且我对 iOS 开发人员只有一点了解(我是一个 android 人......)。
这是我的项目的代码:
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[0],
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={[globalStyle.style.h1, {fontFamily: globalStyle.fonts.AvertaBold}]}>{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={[globalStyle.style.p, {marginRight: 5}]}>{formatDistance(this.props.distance)}</Text>
<MaterialCommunityIcon name={'map-marker-radius'} size={20} color={globalStyle.colors.darkGray} />
</View>
</View>
</TouchableOpacity>
</View>
);
}
}
我的平面列表的代码:
<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}
/>
}
/>
如果需要,我的 renderItem 函数的代码:
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}
/>
);
但是,如果将我的 ItemShop 渲染函数更改为以下内容,则它可以正常工作:
render() {
return (
<View style={{marginTop: 5, marginBottom: 10,
alignItems:"stretch", marginLeft: 10,
marginRight: 10, overflow: "hidden", backgroundColor: "transparent", height: 300}}>
<Text style={[globalStyle.style.h1, {fontFamily: globalStyle.fonts.AvertaBold}]}>{this.props.name}</Text>
</View>
);
}
我真的可以在这里使用帮助或确认为错误,因为我的截止日期真的很快:(
谢谢 !
解决方案
我认为您可以尝试以下步骤: 1.使用调试器工具分析内存堆,并尝试找出堆中保留的内容 2.为您的平面列表指定静态keyExtractor
(item.id 或 item.name)以提高性能
推荐阅读
- javascript - 如何在打字稿中访问组件
- python - 意外的类型:(int, int) 可能的类型:(SupportsIndex, None) (slice, Iterable[None])
- json - SchemaCrawler CLI 命令以 JSON 格式序列化 PostgreSQL 数据库,仅在 Schema 上显示 UID 而不是 SCHEMA 名称和信息
- bash - 对带有 getopt 的选项使用两个参数值
- c# - 如何创建一个非活动的异步方法存根?
- css - PhpStorm 中的 CSS 属性名称自动完成
- ruby-on-rails - 在rails中绘制图形
- c# - 使用 .NET 在 Angular 和 Cosmos DB 之间传递“纯”(无类)json
- windows - 在 non_ssl Apache Windows 安装上激活 mod_ssl 时出错“操作系统无法运行 %1”
- netsuite - 如何将 HTML 放入子列表字段?