0부터 React Native+Expo 시작

이른바 React Native

이것은 React를 사용하여 안드로이드, iOS 애플리케이션을 개발하는 도구입니다.
React Native는 개발자가 자바스크립트가 React Native를 통해 로컬 코드로 작동한다고 쓰는 구조다.

이른바 Expo

Expo는 개발자가 React Native 단일체로 개발할 때 반드시 인지해야 하는 로컬 섹션을 말하며, 앱 주체의 개발을 통해 웹 앱을 개발 경험에 더 가깝게 만든다.
익스포 클라이언트로 불리는 앱도 개발 시 실기에 설치할 수 있으며, 간단한 로컬 환경과의 연결을 통해 동작을 원활하게 확인할 수 있다.그야말로 웹 응용 프로그램을 개발하는 것과 같은 개발 체험이다.

감상

평소 웹 앱은 리액트, iOS 앱은 스위프트가 쓴 작성자인데 조금 접해보니 소감은
이미지를 개발하다.jpg

좋은 곳

Expo를 사용한 개발 환경

구성 요소의 레이아웃은 CSS처럼 가장 높게 쓸 수 있음

자바스크립트로 통신 처리를 할 수 있어서 기쁘다

로컬 애플리케이션 개발 중 React Hooks 및 Type Script 사용이 가장 높음

React Native용 UI 어셈블리 세트Native Base 좋음

개발 중인 응용의 핫 리셋 최고

이제 Swift 를 쓸 필요 없는 인텔리전스 비용

Expo의 클라우드에 코드를 구축하고ipa 파일과 apk 파일을 다운로드할 수 있다

의문

Expo SDK의 개발은 React Native 주체의 추종 속도에 문제가 없을까?

iOS 14의 지원, React Native(0.63) 및 React Native for Web(0.13)의 최신 버전Expo SDK 39에 따라 9/22에 발표

iOS/Android의 OS 업데이트에 수반되는 다양한 구성 요소의 장애 대응

현지인 부분이 가려져 있어서 이것만 알 수 있다

Expo 서버가 다운되면 어느 정도 영향을 줍니까?

근원을 캐는 느낌

심사 없이 앱을 업데이트할 수 있는 OTA 업데이트는 어떻게 됐나요?

Store 설치 후 ipa에 포함된 초판

설치

이 버전의 OTA 업데이트 횟수를 다시 시작해야 하는 응용 프로그램

상세한 설명이 보도은 이해하기 쉽다

프로젝트에 적용

터치의 촉각으로 React Native+Expo를 프로젝트에 적용하는 조건으로

원형적으로 응용 개발을 효과적으로 추진하기를 희망한다

Expo, React Native라면 우선 개발 속도로 안드로이드/iOS 개발

가능

는 디자인과 기능 규격을 제어할 수 있는 응용 개발

Expo, React Native의 기술 제한과 분쟁이 발생하지 않는 규격

개발, 유지 보수를 적용할 수 있는 구성원은 JS 엔지니어뿐입니다.

개발 자체가 React에 닿기만 하면 가능하다는 인상을 주고 현지인층에 문제가 발생해야 한다(땀)

앞으로 제품이 성장함에 따라 어떻게든 로컬 코드에 접근해야 하는 상황에서도 Expo를 eject로 사용메서드할 수 있다.
익스포의 고속 개발 혜택을 받으면서 제품 자체가 성장하는 시기에 eject 활용을 한다는 것이다.나는 앞으로도 그것을 로컬 응용에 도입할 것이라고 생각한다.(개발 속도감이 달라 한번 맛보면 원주민에게 돌아와도 무거워지겠죠 웃음)
그럼 오프닝은 여기까지 하고 Expo로 애플리케이션을 시작하십시오.

사전 준비

Expo 계정 등록

공식 사이트 계좌 등록하세요

Expo Client 설치

Expo 클라이언트를 사용하면 실제 Expo가 만든 애플리케이션을 실기기로 쉽게 확인할 수 있습니다.
iOS/Android의 실제 시스템에 설치하십시오.
Android
https://play.google.com/store/apps/details?id=host.exp.exponent
iOS
https://apps.apple.com/jp/app/expo-client/id982107779

로컬 개발 환경 구축

Expo CLI 설치

설치Expo CLI

npm install -g expo-cli

expo --version
3.28.5

설치 후 버전을 표시하면 됩니다.

expo init 명령을 사용하여 프로젝트의 초기 형태 만들기

expo init ExpoExample
? Choose a template:
  ----- Managed workflow -----
  blank                 a minimal app as clean as an empty canvas
❯ blank (TypeScript)    same as blank but with TypeScript configuration
  tabs (TypeScript)     several example screens and tabs using react-navigation
            and TypeScript
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration

workflow에 대한 공식 문서는 여기.를 참고하십시오.
이번에Managed workflow + TypeScript 가고 싶어요.

✅ Your project is ready!

설치가 완료되었습니다.

(보충) Managed workflow와 Bare workflow 비교 표

빨간 테두리 부분이 포인트입니다.

Expo 성격의 개발 효율의 혜택을 누리고 싶을 때Managed workflow 선택

로컬 코드를 만질 수 있는 경우Bare workflow 선택

내 생각엔 그렇지?

즉시

yarn start

yarn start 이후 package.json에 기술된 expo start 명령을 집행한다.

위와 같은 그림Expo Developer Tools을 시작하면 성공합니다.

Expo Developer Tools의 주요 특징

Expo Client의 QR로 화면 왼쪽 아래에 있는 QR 코드를 읽으면 개발 중인 앱의 움직임을 확인할 수 있다

실제 Expo Client에서 Expo 계정에 로그인하면 QR코드를 읽지 않고도 개발 중인 어플리케이션을 일람할 수 있습니다

개발 환경에 연결이 안 되면 CONNECTION를Tunnel로 바꾸는 게 좋을 것 같아요.

Xcode가 설치되어 있으면 Run on iOS simulator 시뮬레이터가 시작됩니다

그럼 준비되면 바로 코드를 쓰세요.

App.만지다

평소 리액트를 쓰는 사람이라면 전혀 로컬감이 없는 코드를 넣는다.container 스타일의 배경을 흰색에서 검은색으로 반전시켜 Text에 흰색을 칠한다.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
      <View style={styles.container}>
        <Text style={styles.text/* 追加 */}>Open up App.tsx to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000', // 追加 #fff -> #000
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: { // 追加
    color: '#fff' // 追加
  } // 追加
});

이렇게 변경하면 배경이 까매지네요.

편집기에 상기 코드를 저장할 수 있지만, 열재부팅이 활성화되어 있기 때문에, 실제 컴퓨터와 아날로그 등의 결과를 즉시 반영할 수 있습니다.
물론 iOS/Android를 두 손에 넣으면 동시에 반영된다.
로컬 코드를 사용하여 개발할 때, 매번 코드를 구축하고 프로그램을 다시 설치해야 한다.React Native, Expo라면 이 핫 중재 덕분에 웹 애플리케이션처럼 고속 개발이 가능합니다.
코드를 변경한 후 이동하는 것을 체험할 수 있기 때문에 다음에 디렉터리 구조를 확인하세요.

초기 디렉토리 확인

expo init에서 만든 초기 디렉터리와 파일도 확인해야 한다.

화면의 각 구성 요소를 어떻게 처리합니까

리액트 네이티브는 표준 구성 요소도 준비했지만, iOS 애플리케이션에 Material 들어가는 느낌은 원하지 않기 때문에 현재Native Base 이런 구성 요소 집합이 좋다고 생각한다.
문서도 알차다.
리액트를 써본 사람이라면 이 문서만 보면 애플리케이션을 만들 수 있을 것 같아요.
iOS 앱을 개발할 때 테이블 UI 디스플레이UITableView와 UICollectionView 등을 설치하는 데 시간이 많이 걸리기 때문에 이 부분은 간단하게 실현할 수 있어도 감동적이다.

총결산

처음 접촉한 부분도 있고, 이런 총결이 있을 수 있다

React와 JavaScript 지식을 활용한 상태에서 현지 응용을 개발하면 많은 조합React Native + Expo

이 있을 수 있다.

이번에 닿지 않은ipa 파일과 apk 파일의 구축은 참고할 수 있다여기.

Expo의 개발 체험은 매우 순조롭다

.
이 기사를 좋아하시는 분들은 아래 하트 모양을 눌러주시면 좋을 것 같아요.