RN

박정빈·2024년 10월 17일

reactnative

React Native 사용기

목록 보기

1/28

구글 계발자 조직 계정 만들기

네이버 블로그

DUNS번호 발행 방법

네이버 블로그

AsyncStorage WebStorage

GPS 정보 사용하기

사용자의 위치를 알아내고 싶어서 GPS를 사용하고 싶었다.

설치

npx expo install expo-location

사용 예시
스크린이 열릴때 위도 경도를 알아내어 화면에 띄운다.

import React, { useState, useEffect } from "react";
import { View, Text, Button } from "react-native";
import * as Location from "expo-location";

const LocationScreen = () => {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        setErrorMsg("Permission to access location was denied");
        return;
      }

      let loc = await Location.getCurrentPositionAsync({});
      setLocation(loc);
    })();
  }, []);

  let text = "Waiting..";
  if (errorMsg) {
    text = errorMsg;
  } else if (location) {
    text = `Latitude: ${location.coords.latitude}, Longitude: ${location.coords.longitude}`;
  }

  return (
    <View>
      <Text>{text}</Text>
    </View>
  );
};

export default LocationScreen;

Button에는 스타일이 없다!

리액트 네이티브에서 <Button> 컴포넌트는 직접적으로 style 속성을 지원하지 않기 때문에, 스타일을 적용하려면 <Button> 대신 다른 컴포넌트(예: <TouchableOpacity> 또는 <Pressable>)를 사용하거나, Button 외부에 스타일이 적용된 래퍼(View)를 만들어야 합니다.

각 버튼의 차이점

<Button>, <TouchableOpacity>, <Pressable>은 모두 리액트 네이티브에서 터치 가능한 요소를 구현하기 위한 컴포넌트지만, 기능과 스타일링에 차이가 있습니다.

<Button>

기능: 기본적인 터치 가능한 버튼을 제공합니다.
스타일링: title(텍스트), onPress(터치 이벤트 핸들러) 등의 속성만을 제공하며, 기본적으로 스타일을 커스터마이즈하기가 어렵습니다. 배경색이나 텍스트 스타일을 변경하는 것이 제한적입니다.
사용 용도: 빠르게 간단한 버튼을 추가할 때 사용하기 좋습니다. 기본적인 스타일로도 충분하다면 <Button>이 편리합니다.

<TouchableOpacity>

기능: 사용자가 터치했을 때 투명도가 변하는 버튼을 구현할 수 있습니다. 터치할 때 버튼의 불투명도가 낮아지면서 "눌리는" 효과를 주는 것이 특징입니다.
스타일링: 스타일링이 매우 유연합니다. style 속성을 통해 다양한 스타일을 적용할 수 있으며, 텍스트나 이미지 등 다른 컴포넌트와 함께 사용할 수 있습니다.
사용 용도: 버튼을 커스터마이즈해야 하거나, 텍스트 외에 이미지를 사용해야 할 때 적합합니다.

<Pressable>

기능: 리액트 네이티브에서 제공하는 최신 터치 이벤트 핸들링 컴포넌트로, onPress, onPressIn, onPressOut, onLongPress 등 다양한 터치 이벤트에 대한 세밀한 제어가 가능합니다.
스타일링: TouchableOpacity와 마찬가지로 매우 유연한 스타일링이 가능합니다. 또한, 이벤트 상태(예: pressed)에 따라 다른 스타일을 적용할 수 있는 기능이 있어 보다 다이나믹한 사용자 경험을 제공할 수 있습니다.
사용 용도: 더 복잡한 터치 상호작용을 구현해야 하거나, 상태에 따라 스타일을 변경해야 할 때 사용됩니다.

요약

<Button>: 간단한 버튼으로, 기본 스타일만 필요할 때 사용.
<TouchableOpacity>: 터치 시 투명도가 변화하는 효과와 유연한 스타일링이 필요할 때 사용.
<Pressable>: 터치 이벤트에 대한 더 많은 제어가 필요하거나, 상태에 따라 스타일을 변경해야 할 때 사용.

각 컴포넌트는 목적에 맞게 사용하면 되며, 버튼의 외관과 동작을 더 세밀하게 제어하고 싶다면 나 을 사용하는 것이 좋습니다.

그림자

25.10.30수정
https://leerowoon.dev/posts/react-native-shadow-style
new architecture가 도입되고
BoxShadow스타일을 적용할 수 있게 되었다.

리액트 네이티브에서 그림자를 주는 방법은 플랫폼에 따라 다르게 적용됩니다. 리액트 네이티브는 iOS와 안드로이드 모두에서 동작하지만, 두 플랫폼의 그림자 처리가 다르기 때문에 각 플랫폼에 맞는 설정을 해야 합니다.

iOS에서의 그림자 적용
iOS에서는 CSS 스타일을 사용해 그림자를 추가할 수 있습니다. iOS에서는 shadowColor, shadowOffset, shadowOpacity, shadowRadius를 사용합니다.

import { View } from 'react-native';

const MyComponent = () => {
  return (
    <View style={{
      shadowColor: '#000', // 그림자 색상
      shadowOffset: { width: 0, height: 2 }, // 그림자의 위치
      shadowOpacity: 0.8, // 그림자의 불투명도
      shadowRadius: 3,  // 그림자의 반경
    }}>
      {/* Your content here */}
    </View>
  );
};

안드로이드에서의 그림자 적용
안드로이드에서는 elevation을 사용해 그림자를 줄 수 있습니다. elevation은 그림자의 높이를 설정하여 뷰가 떠있는 것처럼 보이게 합니다.

import { View } from 'react-native';

const MyComponent = () => {
  return (
    <View style={{
      elevation: 5,  // 그림자의 높이
    }}>
      {/* Your content here */}
    </View>
  );
};

플랫폼별로 다르게 적용하기
리액트 네이티브에서는 Platform API를 사용해 플랫폼별로 다른 스타일을 적용할 수 있습니다.

import { View, Platform } from 'react-native';

const MyComponent = () => {
  return (
    <View style={{
      ...Platform.select({
        ios: {
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 2 },
          shadowOpacity: 0.8,
          shadowRadius: 3,
        },
        android: {
          elevation: 5,
        },
      })
    }}>
      {/* Your content here */}
    </View>
  );
};

이렇게 하면 각각의 플랫폼에 맞는 그림자 스타일이 적용됩니다.

폰트 적용

따로 글로 작성

카메라

공식문서를 따라하자

이미지 전송

이미지를 http통신을 통해서 백서버로 보내려고 api요청을 보냈는데 자꾸
TypeError: Network request failed 라는 에러가 발생하였다.

여기저기 검색해봐도 방법이 없었는데 아래 블로그에서 같은 에러를 겪은 선례를 발견하였다.
레퍼런스
하지만 이 분도 에러의 원인은 찾지 못했고, 에러가 나지 않게 보내는 법을 알려주신다.

방법은 이미지를 blob으로 바꿔서 보내는 것이다.

const formData = new FormData();
    imgs.forEach((img, index) => {
      formData.append("photos", {
        uri: imgs[index], // 이미지 URI (file:// 형식)
        type: "image/jpeg", // MIME 타입
        name: `photo${index}.jpg`, // 파일 이름
      });
    });

위의 코드처럼 폼데이터에 이미지를 하나하나 넣어주었고, 보내는데 성공했다.

TextInput

최소 너비(min-content width) 기반 크기 결정
TextInput은 flex:1이 있어도, 콘텐츠(placeholder/텍스트) 길이를 기준으로 자체 최소 너비를 가진다.
flex-row + flex-wrap 환경에서는 가로만 확장됨
세로 높이는 intrinsic height 그대로 유지되고,
가로는 남은 공간만큼 확장되지만 부모 높이를 채우지 않는다. (flex: 1이어도)
다른 컴포넌트들과 flex-wrap,flex-row를 가진 View에 있을 시
남은 가로 공간이 최소 너비보다 작아지면 자동 줄바꿈 따라서 minWidth를 지정하면 줄바꿈 시점을 조절할 수 있음
includeFontPadding·lineHeight 영향 있음
Android는 includeFontPadding 영향으로 기본 높이가 더 커질 수 있다.
아래코드 적용시 기본 설정된 패딩을 없앨 수 있다.

  style={{
          paddingVertical: 0,
          paddingTop: 0,
          paddingBottom: 0,
          includeFontPadding: false,
 		}}

SVG

npm:react-native-svg-transformer

StoryBook

스피너 인디케이터

npm:react-native-indicators
npm 문서대로 하되 ts를 쓴다면 아래 설정을 해준다.
declarration.d.ts 폴더에 declare module 'react-native-indicators';추가해서
react-native-indicators 모듈을 any 타입으로 인식하게 한다.