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

问题描述

我正在从事我的项目，我发现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”时，它会变得高效，因为那时渲染的次数并不多。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）