Expo를 사용한 React Native 모바일 개발 초보자 가이드

소개

이것은 React Native 프로젝트 설정을 안내하는 가이드입니다. 단, 이 가이드에서는 React에 대해 자세히 다루지 않을 예정이므로 React를 처음 사용하는 경우 이getting started with react guide.를 확인하는 것이 좋습니다.

Here is a link for what your code should look like, when you are done.

네이티브 및 엑스포 반응

React Native는 크로스 플랫폼 네이티브 앱을 작성하기 위한 프레임워크입니다.

Expo는 동일한 JavaScript/TypeScript 코드베이스에서 iOS 및 Android 앱을 개발, 빌드 및 배포하는 데 도움이 되는 React Native 및 네이티브 플랫폼을 기반으로 구축된 도구 및 서비스 세트입니다. 대안은 xCode 및 Android 스튜디오에서 각 앱을 빌드하는 것인데 이는 매우 번거롭습니다.

설치

전제 조건

node and npm installed 이 있어야 하며 yarn 은 선택 사항이지만 권장됩니다.

그런 다음 npm을 통해 Expo를 설치해야 합니다.

# Install the command line tools
npm install --global expo-cli

이제 프로젝트를 만들 준비가 되었습니다. Yarn을 설치했다면 다음과 같이 작성하십시오.

expo init first-app

또는 npm으로

expo init first-app --npm

여기에서 프로젝트에 대한 몇 가지 옵션이 표시됩니다. iOS용 Apple 개발자 계정 없이도 Expo에서 앱을 출시할 수 있는 관리형 워크플로를 선택하는 것이 좋습니다. 아래 그림에서 볼 수 있듯이 "blank (typescript)"템플릿을 선택했습니다. 처음이라면 "탭"템플릿을 사용할 수도 있습니다. 내비게이션이 내장되어 있습니다.



이제 프로젝트가 있습니다. 터미널에서 'cd first-app'을 사용하여 프로젝트 디렉토리로 이동할 수 있습니다. 프로젝트 구조는 다음과 같아야 합니다.



이제 다음을 작성하여 프로젝트를 실행할 수 있습니다.

yarn start

또는

npm run start

그러면 다음과 같이 표시됩니다.


w를 눌러 브라우저에서 앱을 보거나 Expo go이라는 앱을 다운로드하도록 리디렉션하는 QR 코드를 스캔할 수 있습니다. 이렇게 하면 개발하는 동안 앱을 볼 수 있으며, 이것이 제가 권장하는 것입니다.



이제 React Native에서 실행 중인 앱이 있습니다. 다음 섹션에서는 기본 API가 작동하는 방식을 살펴보겠습니다.

네이티브 API

우리는 "관리되는 작업 흐름"을 선택하므로 Expo로 모든 것을 구축하고 있습니다. 이것은 일부limitations와 함께 제공됩니다. list of supported APIs(100개 이상의 네이티브 API가 있음)에 없는 네이티브 API가 필요한 경우 고유한 네이티브 코드를 작성할 수 있는 베어 워크플로로 전환할 수 있습니다.
다음은 관리형 워크플로와 기본 워크플로를 비교한 것입니다.

네이티브 API 구현

예를 들어 배터리 비율과 GPS 위치를 보여주는 페이지를 만들어 보겠습니다.

battery 구성 요소부터 시작하겠습니다. 다음을 사용하여 설치합니다.

expo install expo-battery

먼저 배터리 비율을 표시하는 작업을 하겠습니다. API 'getPowerStateAsync'가 필요합니다. 구성 요소가 마운트되면 전화를 걸고 짜잔 - 전화기의 배터리 비율이 있습니다.

const [battery, setBattery] = useState<number>(0);

  useEffect(() => {
    Battery.getBatteryLevelAsync().then(b => setBattery(b));
  }, []);

다음과 같이 뷰에 표시할 수 있습니다.

return (
    <View style={styles.container}>
      <Text>Battery {(battery * 100).toFixed(0)}%</Text>
      <StatusBar style="auto" backgroundColor={"black"}/>
    </View>
  );

이제 전화기의 전원 모드를 살펴보는 구성 요소를 만들어 봅시다. 저전력 모드(예: 애니메이션)에 있을 때 비활성화하고 싶은 전력 소모가 많은 기능이 있다고 상상해 보십시오.
다음과 같이 동일한 API에서 전원 상태를 가져올 수 있습니다.

const [lowPoweredState, setLowPoweredState] = useState<boolean | null>(null);

  useEffect(() => {
    Battery.getPowerStateAsync().then(bs => setLowPoweredState(bs.lowPowerMode));
  }, [])

이제 전원 상태에 따라 일부 조건부 렌더링을 수행할 수 있습니다.

  if (lowPoweredState === null) return <Text>Getting info from your phone...</Text>;
  return (
    <Text>Battery state: {lowPoweredState ?
      "i am a static text replacement" :
      "I AM A POWER HUNGRY ANIMATION"}
   </Text>);

최신 상태를 유지하기 위해 전화기가 저전력 상태에서 정상 상태로 변경될 때 다음과 같이 useEffects에 리스너를 추가할 수 있습니다.

const batteryModeSubscriber = Battery.addLowPowerModeListener(b => setLowPoweredState(b.lowPowerMode))
return () => batteryModeSubscriber.remove();

우리의 앱은 이제 항상 전원 상태에 따라 렌더링됩니다.

앱 게시

일반적으로 App Store 및 Google Play 스토어에 앱을 게시한다고 생각합니다. 이렇게 하려면 Apple developer account (100$ 연간 구독) 또는 Google Play developer account (25$ 일회성 요금) 계정이 필요합니다. 앱 빌드 및 릴리스에 대해 자세히 알아볼 수 있습니다here.

당신은 앱 개발자입니다

이제 Expo에서 첫 번째 React Native 앱을 시작했습니다. 이것은 Facebook, Instagram, Coinbase, shopify, Tesla, Uber Eats 등과 같은 앱을 만드는 데 사용되는 것과 동일한 도구입니다. 여기에서 Expo에 대한 자세한 내용을 읽을 수 있습니다: https://docs.expo.dev/ 또는 여기에서 오픈 소스 앱을 확인하세요: https://github.com/withspectrum/spectrum
여기에서 엔터프라이즈 상용구를 확인하세요: https://github.com/infinitered/ignite