• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

ios - 仅来自平面列表 iOS 的 React-Native 巨大内存使用和崩溃

[复制链接]
菜鸟教程小白 发表于 2022-12-11 20:22:38 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

我的应用程序从服务器获取数百个项目,然后将这些数据加载到平面列表 5 项目 x 5 项目 onEndReached 中。但是,当我尝试滚动几十个项目时,我的应用不再响应 onPress(在平面列表之外),并且内存使用量开始激增导致崩溃:

Click here to see image of memory usage

我尝试了所有方法,从使用 getItemLayout、PureComponent、maxToRenderPerBatch、windowSize,我从我的项目中删除了所有图像,所有图像都是可触摸的,但仍然无法解决这个问题。

我当然是在 Release模式下运行我的应用程序。

我不知道如何解决这个问题,因为它只发生在 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>
    );
  }

我真的可以在这里使用帮助或确认为错误,因为我的截止日期真的很快

谢谢!



Best Answer-推荐答案


我认为您可以尝试以下步骤: 1.使用调试器工具分析内存堆,并尝试找出堆中保留的内容 2.为你的flatlist指定一个静态keyExtractor(item.id or item.name)来提高性能

关于ios - 仅来自平面列表 iOS 的 React-Native 巨大内存使用和崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51390389/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap