React Native Image Component 사용하기

 Image Component 

.
├── button.js
└── img
    ├── check.png
    ├── check@2x.png
    └── check@3x.png

이미지 모듈은 js 모듈이 해석되는것과 같은 방법으로 해석된다. 이미지 파일도 자바스크립트 파일과 마찬가지로 check.ios.png, check.andoid.png 파일이 존재할 때 리액트 네이티브 패키지는 플랫폼에 따라 그에 맞는 이미지를 불러온다.

<Image source = {require('./assets/rn-school-logo.png')} />

<Image
          source ={{uri : "https://reactjs.org/logo-og.png"}}
          style={{width: 300, height: 300}}
          />

정적이미지 리소스에 접근할경우  사이즈를 지정해줄 필요가없지만 Network Image 리소스인경우는 반드시 이미자 사이즈를 지정해 줘야한다. 지정하지 않은경우 이미지가 제대로 보이지 않는다.

[원격이미지에 사이즈를 지정한경우]

[이미지 사이즈를 지정하지않은경우]

Image 컴포넌트의 장점

1.  iOS and Android 운영체제 동일하게 사용가능하다.
2. 이미지 파일은 js파일과 동일하게 관리되고 사용된다.
3. 전역이름 공간이 필요없으며, 이름충돌에 대해서 걱정할 필요가없다.
4. 실제로 사용된 이미지만 앱에 패키징된다.
5. 이미지를 추가하고 변경하는데 있어서 app을 재기동할 필요없이 시뮬레이터를 reload하면 된다.
6. 패키져가 이미지 크리를 알고있으므로 코드에 복제할 필요가 없다.
7. 이미지를 npm 패키지를 통해 패포할수 있다.

// GOOD <Image source={require('./my-icon.png')} />; // BAD var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive'; <Image source={require('./' + icon + '.png')} />; // GOOD var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png'); <Image source={icon} />;

이미지를 동적으로 사용해야되는경우 style객체를 이용하여 변경한다.  BAD 케이스 처럼 구문을 사용하지 않도록 한다. 

resizeMode

프레임이 원본 이미지 크기와 일치하지 않을때 이미지 크기를 조정하는 방법을 결정한다. 

cover, contain, stretch, repeat, center 속성이 존재한다.

cover : 이미지의 너비와 높이가 뷰의 해당치수와 같거나 커지도록 이미지 비율을 균일하게 조정한다.

contain : 이미지의 너비와 높이가 뷰의 해당치수와 동일하거나 작도록 이미지 비율을 균일하게 조정한다.

stretch : 크기와 높이를 독립적으로 조정하며 src 종횡비가 변경될 수 있다. 

repeat : view에 프레임을 덮기위해 이미지를 반복한다.

원문출처 : https://facebook.github.io/react-native/docs/image