图像分量过多，导致平移响应器的滑动速度变慢

Question

我通过映射一个json文件来渲染一叠纸牌，每张纸牌都有一个CachedImage组件。当纸牌数量大于10时，动画视图中使用的panresponder可以将纸牌滑入和滑出。屏幕变得迟钝。有一种解决方法。我在渲染前先缓存了几张图像。

这是代码

return this.state.dataSource.map((item,i)=>{
if (i == this.state.currentIndex-1)
        {
return(
              <Animated.View key={item._id} {...this.state.panResponder.panHandlers} style={this.state.swiped_pan.getLayout()}>

                <View style={{ marginTop:normalize(40), flex: 1,position:'absolute',height:height-(height*0.14),width:width-(width*0.05) ,
                 backgroundColor:'white',borderRadius:10,margin:wp('3%'),shadowColor: '#003182',shadowOffset: { width: 0, height: 9 },shadowOpacity: 0.48,shadowRadius: 11.95,elevation:18}}>


                  < View style={styles.Imagebody}>
                    <CachedImage  source={{ uri:item.img.data }} style={styles.image} />
                  </View>

                  <View  style={styles.inner}>
                  <ShareItem id={item._id} name={item.title} img={item.img.data}/>
                    <View style={styles.inner}>
                    <Text style={styles.titleArrtibute}>{item.category}</Text>
                      <Text style={styles.titleText} >{item.title}</Text>
                      <View>
                        <Text style={styles.body}>{item.body}</Text>
                      </View>
                      <View>
                      <Time date={item.date} source={item.source}/>
                      <Text style={{marginTop:normalize(2),fontSize:normalize(10),color:'#afafaf'}}>curated by {item.post}</Text>
                      </View>
                    </View>
                  </View >


                  </View>

            </Animated.View>

          )

          }
else if (i < this.state.currentIndex)
        {
          return null
        }
         if (i == this.state.currentIndex)
        {return(
                        <Animated.View key={item._id} {...this.state.panResponder.panHandlers} style={this.state.pan.getLayout()}>

                          <View style={{ marginTop:normalize(40),flex: 1,position:'absolute',height:height-(height*0.14),width:width-(width*0.05),
                        backgroundColor:'white',borderRadius:10,margin:wp('3%'),shadowColor: '#003182',shadowOffset: { width: 0, height: 9 },shadowOpacity: 0.48,shadowRadius: 11.95,elevation:18}}>


                            < View style={styles.Imagebody}>
                              <CachedImage  source={{ uri:item.img.data }} style={styles.image} />
                            </View>

                            <View  style={styles.inner}>

                            <ShareItem id={item._id} name={item.title} img={item.img.data} />

                              <View style={styles.inner}>
                              <Text style={styles.titleArrtibute}>{item.category}</Text>
                                <Text style={styles.titleText} >{item.title}</Text>
                                <View >
                                  <Text style={styles.body}>{item.body}</Text>
                                </View>
                                <View >
                                  <Time date={item.date} source={item.source}/>
                                  <Text style={{marginTop:normalize(2),fontSize:normalize(10),color:'#afafaf'}}>curated by {item.post}</Text>
                                </View>

                              </View>



                            </View>
                          </View>

                      </Animated.View>

                    )
                }
else{
  return(
              <Animated.View key={item._id} >

                <View style={{ marginTop:normalize(40), flex: 1,position:'absolute',height:height-(height*0.14),width:width-(width*0.05),backgroundColor:'white',
                borderRadius:10,margin:wp('3%')}}>


                  < View style={styles.Imagebody}>
                    <CachedImage  source={{ uri:item.img.data }} style={styles.image} />
                  </View>

                  <View  style={styles.inner}>
                  <ShareItem  id={item._id} name={item.title} img={item.img.data} />
                    <View style={styles.inner}>
                    <Text style={styles.titleArrtibute}>{item.category}</Text>
                      <Text style={styles.titleText} >{item.title}</Text>
                      <View>
                        <Text style={styles.body}>{item.body}</Text>
                      </View>
                      <View >
                      <Time date={item.date} source={item.source}/>
                      <Text style={{marginTop:normalize(2),fontSize:normalize(10),color:'#afafaf'}}>curated by {item.post}</Text>
                      </View>

                    </View>
                  </View >


                </View>
            </Animated.View>
          )
        }
}

因此，基本上，上一张卡不在屏幕的位置-width处，当前一张在平移响应器的顶部，而其余卡在顶部卡的下方。 如果卡号超过10，则刷卡太慢。因此，有什么方法可以通过卸载或分页来解决。我不使用固定列表或其他组件。