React native 显示高分辨率图像会使我的应用程序在我的react本机应用程序中崩溃，我如何解决此问题？

我需要用scroll在我的视图中显示大约20个高分辨率的图像，因此当我在scroll期间运行我的应用程序时，我的应用程序将在我的iphone 6 plus中崩溃。我检查了xcode并发现以下错误消息：

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

我有一个简单的列表，里面有很多图片幻灯片，每一张都是一个“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> 
      );    
  }
}

导出类JourneySlide扩展组件{
建造师（道具）{
超级（道具）；
此.state={
刷新计数：0，
}
}
constructViews=（）=>{
设排放量=[]；
this.props.levels.forEach（（项，索引）=>{
推(
)        
})
返回和排放；
}
render（）{
console.log（'再次渲染旅程幻灯片'）
设sizeH=normalize（42）；
让{
资产(单位)高度,，
资产宽度，
资产名称，
标题
副标题，
}=这是道具；
让滑动高度=检查高度（资源宽度、资源高度）
返回(
{/*{this.constructViews（）}*/}
item.level_id}
renderItem={（{item，index}）=>
}            
showsVerticalScrollIndicator={false}
style={{zIndex:2}}
getItemLayout={（数据，索引）=>(
{长度：sizeH，偏移量：sizeH*索引，索引}
)}
/>
);    
}
}

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

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

所以我的问题是滚动过程中的崩溃问题，我还检查了滚动过程中的内存使用情况，大约是200 mb，滚动过程中cpu的使用率是20%

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

两个可疑的问题：

（1） 我想看一下（）以了解一般提示，但特别是

windowSize

。Flatlist将继续呈现屏幕外项目的“缓冲区”。在您的情况下，Flatlist的默认值会导致您的列表在向下滚动足够远后始终呈现所有图像。由于您的图像很大，这可能是您的问题

---

（2） 您的平面列表项目多久更新一次？您可能没有更改组件的道具/状态，但组件可能仍在进行大量处理。当我呈现一个静态列表时，我通常会扩展Purecomponent，然后在

shouldComponentUpdate

上返回false。总体而言，这是一个巨大的性能提升。

也许可以在这些旧设备上尝试一些列表虚拟化/窗口或分页，这些旧设备可能无法处理渲染整个图像列表。我已经在父组件中使用平面列表来列出这些图像，并阻止渲染所有图像。但是在一些滚动和更改视图后，它会崩溃。关于你的第一个建议，我的图像应该是全屏的，所以我根据窗口宽度计算图像宽度和高度，并且我在平面列表中使用initialNumToRender={2}，因为基本上两个图像将覆盖我的整个屏幕，所以我将其设置为2。关于你的第二个建议，我已经完全按照你提到的那样做了，并且阻止了额外的渲染，但似乎图像的高分辨率是主要问题。即使使用initialNumToRender={2}，一旦你向下滚动，平面列表在默认情况下仍然会渲染额外的10-20。尝试设置WindowsSize={1}