为什么resizeMode“包含”经常用列表渲染太多

Question

我正在从事我的项目，我发现resizeMode cover在呈现的情况下比contain模式工作得好。

图像组件看起来像这样

import React from 'react';
import { Image, StyleSheet, ScrollView } from 'react-native';

import { Dimensions } from 'react-native';

import propTypes from 'prop-types'

import FileViewer from "react-native-file-viewer";

import { openGalleryApi } from './api'

import {
  Menu,
  MenuOptions,
  MenuOption,
  MenuTrigger,
} from 'react-native-popup-menu';

//Return React Native's Image Component
class ImageComponent extends React.Component {
  static propTypes = {
    deleteImage: propTypes.func,
    movePicUp: propTypes.func,
    movePicDown: propTypes.func,
    imageObj: propTypes.object,
    addImagesAbove: propTypes.func,
    addImagesBelow: propTypes.func
  }

  state = {
    isMenuVisible: false
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.imageObj.id !== this.props.imageObj.id
  }

  toggleMenuVisible = () => {
    this.setState({isMenuVisible: true})
  }

  handleDelete = () => {
    this.props.deleteImage(this.props.imageObj.id)
  }

  handleMoveUp = () => {
    this.props.movePicUp(this.props.imageObj.id)
  }

  handleMoveDown = () => {
    this.props.movePicDown(this.props.imageObj.id)
  }

  handleViewImage = async () => {
    try{
      await FileViewer.open(this.props.imageObj.uri);
    } catch(e) {
      // Error
    }
  }

  handleAddImageAbove = async () => {
    const listOfUri = await openGalleryApi()
    if (!listOfUri) return //if listOfUri is false then return simply
    this.props.addImagesAbove({id: this.props.imageObj.id, listOfUri})
  }

  handleAddImageBelow = async () => {
    const listOfUri = await openGalleryApi()
    if (!listOfUri) return //if listOfUri is false then return simply
    this.props.addImagesBelow({id: this.props.imageObj.id, listOfUri})
  }


  render() {
    let windowWidth = Dimensions.get('window').width;
    let windowHeight = (Dimensions.get('window').height*53)/100;
    Image.getSize(this.props.imageObj.uri, (width, height) => {
      if (width < windowWidth)
        windowWidth = width
      if (height < windowHeight)
        windowHeight = height
    });
    return(
        <Menu>
          <MenuTrigger>
              <Image
                style={{
                  width: windowWidth,
                  height: windowHeight,
                  marginBottom: 13
                }}
                resizeMode={'contain'}
                source={{
                  uri: this.props.imageObj.uri
              }}/>
          </MenuTrigger>
          <MenuOptions>
            <MenuOption text='View' onSelect={this.handleViewImage}/>
            <MenuOption text='Delete' onSelect={this.handleDelete}/>
            <MenuOption text='Move Up' onSelect={this.handleMoveUp}/>
            <MenuOption text='Move Down' onSelect={this.handleMoveDown}/>
            <MenuOption text='Add Above' onSelect={this.handleAddImageAbove}/>
            <MenuOption text='Add Below' onSelect={this.handleAddImageBelow}/>
          </MenuOptions>
        </Menu>
    )
  }
}

export default ImageComponent

const styles = StyleSheet.create({
  image: {
    width: 200,
    height: 200,
    marginBottom: 13
  }
});

主要组件看起来像这样：

import React from 'react';
import { StyleSheet, Text, View, ScrollView, FlatList } from 'react-native';

import ImageComponent from './ImageComponent';
import { MenuProvider } from 'react-native-popup-menu';
import DialogComponent from './Dialog';
import Buttons from './Buttons'

import { Button } from 'react-native-elements'

import {openGalleryApi, openCameraApi} from './api'

import { 
  addImages, 
  removeAllImages, 
  movePicDown, 
  movePicUp, 
  deleteImage, 
  addImagesAbove,
  addImagesBelow } from '../Redux/actions'
import { connect } from 'react-redux'

class Main extends React.Component {
  state = {
    showDialog: false
  }

  componentDidMount() {
    this.id = 0
    this.props.navigation.setOptions({
        headerLeft: () => (
          <Button title="Clear" buttonStyle={{marginLeft: 10}} type='clear' onPress={this.handleClearImages}/>)
      })
  }

  openGallery = async () => {
    const listOfUri = await openGalleryApi()
    if (!listOfUri) return //if listOfUri is false then return simply
    this.props.addImages(listOfUri)
  }

  openCamera = async () => {
    await openCameraApi()
  }

  handleMakePDFButton = () => {
    this.toggleShowDialog(true)
  }

  toggleShowDialog = bool => {
    this.setState({showDialog: bool})
  }

  handleClearImages = () => {
    if (this.props.imagePaths.length>0){
      this.props.removeAllImages()
    }
  }

  renderItem = ({ item }) => (
    <ImageComponent
      imageObj={item}
      movePicUp={this.props.movePicUp}
      movePicDown={this.props.movePicDown}
      deleteImage={this.props.deleteImage}
      resizeMode={this.props.resizeMode}
      addImagesAbove={this.props.addImagesAbove}
      addImagesBelow={this.props.addImagesBelow}
    />  
  )

  render() {
    return (
      <View style={styles.container}>
        <MenuProvider>
          <FlatList
            data={this.props.imagePaths}
            renderItem={this.renderItem}
            keyExtractor={item => item.id.toString()}
            ref="flatList"
            onContentSizeChange={()=> this.refs.flatList.scrollToEnd()}
          />
        </MenuProvider>
        {this.state.showDialog && 
          <DialogComponent
            closeDialog={this.toggleShowDialog} //Prop to close Pop Up dialog
            imagesPath={this.props.imagePaths}
        />}
        <Buttons 
          handleMakePDFButton={this.handleMakePDFButton}
          openCamera={this.openCamera}
          openGallery={this.openGallery}
        />
      </View>
    )
  } 
}

const mapStateToProps = (state) => ({
  imagePaths: state.imagesPath,
  resizeMode: state.settings.resizeMode
})

const mapDispatchToProps = {
  addImages: addImages,
  removeAllImages: removeAllImages,
  movePicUp: movePicUp,
  movePicDown: movePicDown,
  deleteImage: deleteImage,
  addImagesAbove: addImagesAbove,
  addImagesBelow: addImagesBelow
}

export default connect(mapStateToProps, mapDispatchToProps)(Main)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

在上面的代码中，它渲染太多，而当我们将resizeMode更改为“ cover”时，它会变得高效，因为那时渲染的次数并不多。

但是我需要包含模式才能显示完整图像，所以我该怎么办，有人可以帮我吗？