react_native Image/ImageBackground/KeyboardAvoidingView

프로그래밍/리액트네이티브

react_native Image/ImageBackground/KeyboardAvoidingView

TONY07 2021. 6. 4. 20:16

리액트 네이티브의 이미지 컴포넌트(Image , ImageBackground) 와
포커스되어 있으면 KeyboardAvoidingView가 자동으로 스크롤 되도록 하는 것을 학습한다.

1. Image

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

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 100,
    height: 200,
  },
});

const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.tinyLogo}
        source={require('.//download.jpg')}
      />
      <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://w.namu.la/s/41015efa2255d765a9f4e348cd728257014f5036c7c163f5cac81331d4170fd50c187ad77018c0edc6a91654540cad58c347b8f3909c3ff00add93088d029b89dc4a4451254b284c13b20462ec7626bb9c9c1268f9ef95c0d62d8ee6a2eb4162',
        }}
      />
      <Image
        style={styles.logo}
        source={{
          uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
        }}
      />
    </View>
  );
}

export default DisplayAnImage;

source 에는 uri 주소를 넣어 이미지를 불러온다.

source={{uri : '주소' }} 형태 이다.

{} 는 jsx에서는 자바스크립트 객체를 사용할 때 사용하는 문법이다.

require 는 내부 경로에서 이미지를 가져온다. 하지만 프로젝트의 내부에 있어야 한다.

기존에 이미지보다 Image 컴포넌트에 적용된 이미지는 더 확대되어 나오는 것을 확인 할수있다.

컴포넌트 크기에 맞게 이미지를 조절하려면 resizeMode 를 사용합니다.

resizeMode:'cover'
: 이미지의 크기가 뷰의 해당 크기보다 크거나 같도록 이미지의 크기를 균일하게 조정한다.
부모 컴포넌트 크기를 꽉 채워야 할 때 사용됩니다.
(이미지의 가로 세로 비율 유지)

resizeMode:'contain'
: 이미지의 크기가 뷰의 해당 크기와 같거나 작아지도록 이미지의 크기를 균일하게 조정한다.

본 이미지의 전체를 보여줘야 할 때 사용됩니다.
(이미지의 가로 세로 비율 유지)

resizeMode:'center'
두 차원을 따라 뷰의 중앙에 이미지를 배치합니다.
이미지가 뷰보다 크면 뷰에 포함되도록 균일하게 축소합니다.

2. ImageBackground

이미지를 백그라운드 이미지로 넣는 컴포넌트 입니다.

( TMI : js 같은 경우는 스타일에서 background-image: url(...); 을 넣으면 백그라운드 이미지가 들어간다. )

import React from "react";
import { ImageBackground, Image, StyleSheet, Text, View } from "react-native";

const image = { uri: "https://reactjs.org/logo-og.png" };

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={image} style={styles.image}>
      <Image 
        style={styles.cover}
        source={require('./download.jpg')}
      />
      <Text style={styles.text}>Inside</Text>
    </ImageBackground>  
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column"
  },
  image: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center"
  },
  text: {
    color: "white",
    fontSize: 42,
    fontWeight: "bold",
    textAlign: "center",
    backgroundColor: "#000000a0"
  }
});

export default App;

백그라운드 이미지안에 이미지를 또 넣어서 이미지를 띄울수도 있다.

<ImageBackground> 는 style을 사용해줘야 에러가 발생하지 않는다.
컴포넌트를 구분하기에 사용하기도 하며 <Image> 그 위에 하위 요소를 추가 할 수있다.

3. KeyboardAvoidingView

입력하는 곳에 입력을 하려고하면 키보드가 올라왔을 때 뷰를 가려져버린다.

하지만 ScrollView 내에서는 작동하지 않는다.
이 때 사용하는 것이 KeyboardAwareScrollView 이다.
KeyboardAwareScrollView 로 감싸고 사용하면 된다.

Props

- behavior

키보드 존재에 반응하는 방법을 지정한다.
3가지 option 이 있다.

height : 입력창이 키보드로부터 keyboardVerticalOffset 만큼 벌어진다.
position : 입력창이 현재 위치한만큼 키보드로부터 위치하게 된다.
padding : 키보드로부터 keyboardVerticalOffset 만큼 padding을 만든다.

- keyboardVerticalOffset

사용자 화면 상단와 입력창의 반응을 볼 수 있다.
기본값은 0 이다.

위에 코드에서는

behavior={Platform.OS === "ios" ? "padding" : "height"}

스마트폰 OS 가 ios 일때는 padding 안드로이드 라면 height 로 설정하였다.

IOS 는 키보드를 내릴때 입력 칸이 아닌 다른곳을 누르는 경우 텍스트 입력이 취소된다.

Android에서는 Back키를 통해서도 키보드를 내릴 수 있다.

3줄 요약

1) Image는 사진을 가져오는데 source 를 통해 uri 를 불러올수도 있고 require(내부경로) 에서도 가져올 수 있다.

2) imageBackground 는 백그라운드 이미지를 불러오는데 styles가 필수이다.
3) KeyboardAvoidingView 는 키보드가 뷰를 가리는 현상을 해결하기위한 구성 요소인데
인자값으로 height , padding, position 이 있다.