React Native 04 - My Gallery
Post

React Native 04 - My Gallery

09/02/2023
Jiyeon Park
2

나만의 갤러리 프로젝트를 진행하면서 알게된 내용들을 작성한 글이다.

admob으로 광고 추가하기

이 프로젝트에서는 앨범을 2개 이상 만들려면 광고를 본 후에 만들 수 있다.

위 기능을 admob을 이용하여 구현했다.

자세한 이용방법은 내 블로그에 따로 정리 되어있다.

ImagePicker

ImagePicker는 expo에서 제공한다.

저장된 이미지나 영상 또는 카메라로 직접 찍은 이미지를 프로그램으로 전달하는 역할을 한다.

npx expo install expo-image-picker 명령어로 설치하여 사용한다.

  • 사용법

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    import * as ImagePicker from "expo-image-picker";

const pickImage = async () => {
    // No permissions request is necessary for launching the image library
    let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.All,
    allowsEditing: true,
    aspect: [4, 3],
    quality: 1,
    });

    console.log(result);

    if (!result.cancelled) {
    };
    }
};

화면 너비값 가져오기

Dimensions를 사용한다.

다양한 화면의 너비와 높이값을 동적으로 가져올 수 있다.

1
2
3

import {Dimensions} from 'react-native';

const width = Dimensions.get('screen').width;

팝업형태의 창을 Modal이라고 한다.

React Native에서 Modal을 제공한다.

1
2
3
4
5

<Modal
    animationType="slide"
    transparent={true}
    visible={modalVisible}
></Modal>

모달창 배경은 투명하게

modal에서 배경 부분만 투명도값을 지정하고, 하위요소들에는 영향을 주고 싶지 않을 경우에는 style에 다음값을 설정 하면된다.

backgroundColor: rgba(255,255,255,0.8)

Develop, React-Native
React-Native