Question

我需要在滚动视图中显示约20张高分辨率图像，因此在滚动过程中运行我的应用时，我的应用将在iphone 6 plus中崩溃。我检查了xcode并找到此错误消息：

[process_info]正在退出，因为我们的工作空间主机已断开连接。 XPC连接中断

我有一个平面列表，里面有很多imageSlides，其中每个都是一个“ JourneySlide”组件。

这是我的代码：

export class JourneySlide extends Component {

  constructor(props){
    super(props);
    this.state = {
      refreshCount : 0,
    }
  }

  constructViews = () => {
    let slideMissions = []; 
    this.props.levels.forEach((item , index)=> {           
      slideMissions.push(
        <JourneyMission 
        maxLvlNumber={this.props.levels[0].level_number}
        seasonID={this.props.season_id}
        is_locked={item.is_locked}
        is_completed={item.is_completed}
        prize_value={item.prize_value}
        prize_type={item.prize_type}
        level_number={item.level_number}
        message=""
        level_id={item.level_id}
        onPress={this.props.onPress}
        itemIndex={index}
        asset_height={this.props.asset_height}
        asset_width={this.props.asset_width}
        pos_Y={item.pos_Y}      
        pos_x={item.pos_x}      
        />
      )        
    })
    return slideMissions;
  }

  render() {
    console.log('Journey Slide render again')
    let sizeH = normalize(42);
    let {  
      asset_height,
      asset_width,
      asset_name,
      title,
      sub_title,                  
    } = this.props; 
        let slideHeight = checkHeight(asset_width,asset_height)
      return (
        <View style={[{height: slideHeight, width : widthx}]}>
          {/* {this.constructViews()} */}
          <FlatList 
            data={this.props.levels}
            keyExtractor={(item) => item.level_id }
            renderItem={({item, index}) => 
            <JourneyMission 
            maxLvlNumber={this.props.levels[0].level_number}
            seasonID={this.props.season_id}
            is_locked={item.is_locked}
            is_completed={item.is_completed}
            prize_value={item.prize_value}
            prize_type={item.prize_type}
            level_number={item.level_number}
            message=""
            level_id={item.level_id}
            onPress={this.props.onPress}
            itemIndex={index}
            asset_height={this.props.asset_height}
            asset_width={this.props.asset_width}
            pos_Y={item.pos_Y}      
            pos_x={item.pos_x}      
            />}            
            showsVerticalScrollIndicator={false}
            style={{zIndex:2}}
            getItemLayout={(data, index) => (
              {length: sizeH, offset: sizeH * index, index}
            )}
          />
         <Image 
         style={{
           position: 'absolute',
           zIndex: 1,          
           width: widthx,
           height: slideHeight
         }}
         // resizeMode="stretch"
         resizeMethod="resize"
         source={journey[asset_name]}
        /> 
        </View> 
      );    
  }
}

在这里我将每个图像添加到我的视图中，它们通常具有2048 * 2732及以上分辨率res

<Image 
         style={{
           position: 'absolute',
           zIndex: 1,          
           width: widthx,
           height: slideHeight
         }}
         // resizeMode="stretch"
         resizeMethod="resize"
         source={journey[asset_name]}
        />

所以我的问题是滚动过程中的崩溃问题，我还检查了滚动过程中的内存使用情况，它在滚动过程中的内存使用量约为200 mb和20％。

我在较新的iphone上检查了此应用程序，它工作正常，但我需要在iphone 6和5s上处理此问题请帮助我提供您的建议。

Answer 1

两个可疑：

（1）我将看一下（flatlist-performance-tips）的一般技巧，但特别要看一下windowSize。 Flatlist将继续渲染屏幕外项目的“缓冲区”。对于您而言，一旦向下滚动足够远，Flatlist的默认值将导致列表始终渲染所有图像。由于您的图片很大，因此这可能是您的问题。

（2）您的Flatlist项目多久更新一次？您可能没有更改组件的属性/状态，但是组件可能仍在进行大量处理。呈现静态列表时，通常会扩展Purecomponent，然后在shouldComponentUpdate上返回false。通常，这是巨大的性能提升。

显示高分辨率图片会使我的应用程序在本机应用程序中崩溃，该如何解决？

1 个答案: