[ReactNative] Image넣기

ReactNative에서 이미지를 넣는 방법에는 두가지가 있습니다.

1. 로컬에서 이미지를 넣는 방법 
2. 서버에서 이미지를 가져오는 방법

 

로컬에서 이미지 넣기

 

 

이미지 저장

프로젝트 폴더내에 assets이라는 폴더를 만들고 그 내에 image라는 폴더를 만들어

원하는 이미지를 해당 폴더에 넣어줍니다.

저는 십덕이니까는 슈퍼맨을 넣어줬어요 

제가 정말 좋아하는 슈퍼맨 사진입니다 보기만해도 희망과 뽕이 차오릅니다.

 

Image IMPORT

import {Image} from 'react-native';

사용을 위해서 이미지 클래스를 임포트해줍니다.

 

이미지 태그 삽입

단순하게 이미지를 넣기위해서는 이미지 태그와 source를 이용하여 이미지를 넣어줍니다.

방법1) source={require('경로')}

render() {
    return (
      <View>
        <View>
          <Image
            source={require('react_native_04/assets/images/superman.jpg')}
          />
        </View>
      </View>
    );
  }
}

 

방법2) image를 import 하여 사용

import Superman from '../assets/images/superman.jpg';

//생략

  render() {
    return (
      <View>
        <View>
          <Image source={Superman} />
        </View>
      </View>
    );
  }
}

이런 방법으로도 가능합니다. 

 

결과를 다음과 같이 확인해 볼 수 있습니다.

 

그런데 다음과 같이 이미지가 너무커서 조절이 필요합니다.

스타일로 조절해주시면 됩니다. 

 

 style 

스타일에 width와 height를 추가해서 적용해봅시다.

import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  ActivityIndicator,
  Image,
} from 'react-native';
import Superman from '../assets/images/superman.jpg';

class PickerComponent extends Component {

  render() {
    return (
      <View>
        <View>
          <Image source={Superman} style={styles.image} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  image: {
    width: '100%',
    height: 500,
  },
});

export default PickerComponent;

 

 

Property 

공식문서를 참고하면 더욱 많은 것들이 있습니다.

https://reactnative.dev/docs/image

Image · React Native

 

 

 resizeMode

더 많은 요소들이 있으니 참고해보세요

요소	설명	결과
cover	이미지의 (가로세로)비율을 유지함 :  주어진 공간 내를 빼곡히 채우는 방법  채우기위해 잘리는 부분이 생김
contain	이미지의 (가로세로)비율은 유지함  : 주어진 공간내에서 원본 사진을 전부 보여주는방법

각 값들의 차이를 알기 위해 스타일에 배경색을 빨간색으로 추가해주었습니다 

 

 

 

서버에서 이미지를 가져오기

 

 

이미지(url) 가져오기

서버에 올려진 이미지를 가져올 수 있도록 url을 제공해주는 사이트에 들어가서 예제를 연습해봅시다

 picsum.photos라는 사이트입니다.

https://picsum.photos

Lorem Picsum

 

이 url을 사용해보도록 합시다. 

 

 

source 작성

source부분에서 {url: 'url link'}로 변경해주시면됩니다. 

import React, {Component} from 'react';
import {View, Text, StyleSheet, TextInput, Image} from 'react-native';


class App extends Component {
  render() {
    return (
      <View style={styles.mainView}>
        <Image
          source={{url: 'https://picsum.photos/id/237/200/300'}}
          style={styles.image}
          resizeMode="cover"
        />
      </View>
    );
  }
}



export default App;

 

결과)

contain이 적용되었음에도 사진이 비율이 맞지않다고 생각이 되는데

이는 이미지 url을 보시면 

'https://picsum.photos/id/237/200/300'

뒤에 200/300이라는 숫자를 볼 수 있는데, 이는 width와 height를 지정해준 것입니다. 

숫자를 임의로 변경하면 다른 크기로 보입니다.

 

 

Property

onLoadEnd : 이미지 로딩이 끝났을때 트리거됨

서버에서 이미지를 가져오는 경우 시간이 걸리기 때문에, 이미지가 로딩되는 동안 로딩창을 띄우거나,

로딩이 완료되면 alert창을 띄우는 등 다양한 용도로 사용할 수 있습니다. 

        <Image
          source={{url: 'https://picsum.photos/id/237/200/300'}}
          style={styles.image}
          resizeMode="cover"
          onLoadEnd={() => alert('Image Loaded!!')}
        />