11. React-Native Image, ActivityIndicator

1. Image

—source

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

const App = () => {
  return (
      <View style={styles.container}>
        <Image style={styles.image1} source={require('./assets/iu.jpeg')}/>
        <Image style={styles.image2} source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}} />
      </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex : 1,
    backgroundColor: '#eee',
    justifyContent: 'center',
    alignItems: 'center'
  },
  image1: {
    width: 200,
    height: 200,
  },

  image2: {
    width: 50,
    height: 50,
    marginTop: 50
  }
});

export default App;

• require : 폴더에서 가져오는 경우 사용

• uri : uri주소로 가져오는 경우 사용

—resizeMode

import React, {useState} from 'react';
import {View, StyleSheet, Image, Text, Button} from 'react-native';

const App = () => {
  //resizeMode의 속성을 담은 배열 상수 정의
  const resizeMode = ['cover', 'contain', 'stretch', 'repeat', 'center']
  //useState Hook을 통해 배열의 인덱스 값 전달
  const [mode, setMode] = useState(0);
  
  //버튼 클릭시 발생하는 이벤트
  const modeChange = () => {
    //mode +1 % 4한 값을 리턴
    setMode(mode => (mode + 1) % 4);
  }
  
  return (
      <View style={styles.container}>
        <Text style={styles.textStyle}>resizenide : {resizeMode[mode]}</Text>
        <Button title='Change Mode' onPress={modeChange}/> 
        <Image style={[styles.image1, {resizeMode: resizeMode[mode]}]} source={require('./assets/iu.jpeg')}/>
      </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex : 1,
    backgroundColor: '#eee',
    justifyContent: 'center',
    alignItems: 'center'
  },
  subView: {
    flexDirection: 'row'
  },
  textStyle: {
    fontSize: 20,
  },
  image1: {
    marginTop: 30,
    width: 300,
    height: 300,
  },
});

export default App;

→ 훅을 이용해서 버튼을 클릭하면 resizeMode의 속성이 변경되어 렌더링하는 코드이다.

→ resizeMode는 크게 5가지가 있다.

—resizeMode 속성

이름	태그
cover	이미지의 가로 세로 중 좁은 부분이 부모 컴포넌트의 100%를 차지할 때까지 이미지를 늘리는
contain	이미지의 가로 세로 중 넓은 부분이 부모 컴포넌트의 100%를 차지할 때까지 이미지를 늘리는것
stretch	넓이와 높이를 따로 지정할 수 있다.
repeat	이미지를 뷰의 프레임이 다 찰 때까지 반복한다.
center	뷰의 중앙에 이미지를 배치하는 속성

---

2. ImageBackground

import React, {useState} from 'react';
import {View, StyleSheet, Image, Text, Button, ImageBackground} from 'react-native';

const App = () => {

  return(
    <View style={styles.container}>
      <ImageBackground source={require('./assets/iu.jpeg')} style={styles.image}>
        <Text style={styles.text}>Inside</Text>
      </ImageBackground>
    </View>
  )
}
const styles = StyleSheet.create({
  container: {
    flex : 1
  },
  text: {
    fontSize: 42,
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
    backgroundColor: '#000000a0'
  },
  image: {
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center'
  },
});

export default App;

→ 배경에 이미지를 넣을 수 있는 컴포넌트이다.

→ 알아두면 유용한 컴포넌트이다.

---

3. ActivityIndicator

→ 로딩 도구를 표시해주는 컴포넌트이다.

import React, {useState} from 'react';
import {View, StyleSheet, Text, ActivityIndicator} from 'react-native';

const App = () => {

  return(
    <View style={[styles.container, styles.horizontal]}>
      <ActivityIndicator />
      <ActivityIndicator size="large" />
      <ActivityIndicator size="small" color="#0000ff" />
      <ActivityIndicator size="large" color="#00ff00" />
    </View>
  )
}
const styles = StyleSheet.create({
  container: {
    flex : 1,
    justifyContent: 'center'
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 5,
  }

});

export default App;

— indicator의 크기가 너무 작아서 사진은 생략하였다.

ActivityIndicator 속성

• animating : 인디케이터를 표시할지 안할지를 Boolean값으로 결정한다. (default : true)

• color : 색깔을 지정한다. (Android default : null, IOS default : #999999)

• hidesWhenStopped(IOS만 적용) : 애니메이션을 하지 않을 때 인디케이터를 숨길지 여부를 정하는 속성이다. (default : true)

• size : IOS, Android 둘다 small, large 속성을 갖고 있고 default는 small이다. Android는 정수로도 지정이 가능하다.

Uploaded by Notion2Tistory v1.1.0