React Native : 렌더링 된 이미지 재사용

Question

"로고 벽"과 같은 것을 만들려고하지만 동일한 이미지가있을 수 있습니다. 이미지를 렌더링 할 때 동일한 이미지 URL이 이미 가져온 경우에도 각각로드됩니다. 여기

내 코드입니다 :

export default class LogoWall extends React.Component 
{ 
    //... 

    renderLogo(logoUrl) 
    { 
     // need to wrap into a function to have unique keys... 
     return (key) => <Image 
      key={key} 
      source={{uri: logoUrl}} 
      style={styles.logo} 
     /> 
    } 

    render() 
    { 
     // trying to save logos within this object 
     const logos = {}; 

     return (
      <View style={styles.rowContainer}> 
       {(() => { 
        let logoRows = []; 

        for (let i = 0; i < this.props.rows; i++) { 
         logoRows.push(<View style={styles.logoRow} key={i}> 
          {this.getLogos(i % 2 === 0).map((logoUrl, key) => { 

           // should only render when this image doesn't exist 
           if (typeof logos[logoUrl] === 'undefined') { 
            logos[logoUrl] = this.renderLogo(logoUrl); 
           } 

           return logos[logoUrl](key) 
          })} 
         </View>) 
        } 

        return logoRows; 
       })()} 
      </View> 
     ) 
    } 
} 

어떻게이 한 번만 하나 개의 이미지를로드 향상시킬 수 있지만, 그들 (다시 반입하지 ​​않고) 여러 번 표시가 있습니까?

Answer 1

이미지가 다시 가져 오기가 확실합니까? 확인하기 위해 네트워크 활동을 확인 했습니까? 만약 반응 네이티브가 아직 캐싱을하지 않는다면 조금 놀랄 것입니다. 그러나 여러분의 답을 얻지 못하고 거기에 해결책이 있기 때문에 제가 가정 할 것입니다 ...

https://github.com/kfiroo/react-native-cached-image 이 패키지를 사용하는 경우

, 당신은 ... 대체

<CachedImage 
    key={key} 
    source={{uri: logoUrl}} 
    style={styles.logo} 
/> 

와

<Image 
    key={key} 
    source={{uri: logoUrl}} 
    style={styles.logo} 
/> 

필요하지만 중복 인출이 있는지 확인하십시오 것 실제로 일어나고 저희에게 알려주십시오. 또한이 패키지는 기본 모듈을 사용하므로 엑스포 (또는 CRNA)에서 꺼낼 용의가 있거나 표준 react-native init 기반 응용 프로그램을 사용한다고 가정합니다. 당신은 당신이 사용하고있는 것을 언급하지 않았습니다. 자바 스크립트 기반 솔루션이 필요하다면 memoizingrenderLogo 함수를 사용해보십시오.