프로그래밍 경력 반년의 아마추어가 쓰고 있습니다.

실수하지 않도록 자신도 잘 조사한 후 부탁드립니다.

대상 독자

모바일 앱 개발을 한 적이없는 사람

JavaScript의 기초 구문을 아는 사람

React를 아는 사람

Mac 사람

나입니다. 시행착오의 기록이 되고 있으므로, 베스트 프랙티스가 아닐 가능성이 충분히 포함되어 있는 것 양해 바랍니다.

환경 구축

Node.js 설치

위 링크에서 다운로드할 수 있습니다.

ReactNative 설치

공식 튜토리얼 에서도 추천하고 있는 바와 같이, 「Expo CLI」라고 하는 「ReactNative+편리한 기능 여러가지」의 패키지를 인스톨 해 봅니다.

그런 다음 휴대 전화의 앱 스토어에서 "Expo"를 검색하고 앱을 스마트 폰에 다운로드하는 것이 좋습니다. 자신의 스마트 폰으로 개발중인 화면을 확인할 수 있습니다.

$ npm install -g expo-cli

위의 명령으로 "Expo CLI"를 설치할 수 있습니다.

새 프로젝트 만들기

빨리 앱 개발에 집중합시다.

$ expo init AwesomeProject

새 프로젝트를 만듭니다. 이번에는 "AwesomeProject"라는 이름을 붙였습니다.

도중에 스타터 템플릿을 무엇으로 할 것인지 묻습니다.
「Blank」라든지 「Blank with TypeScript」라든지, 여러가지 있습니다만, 이번은 처음이므로 「Blank」를 선택해 보았습니다.

cd AwesomeProject
npm start

프로젝트를 만든 후 만든 디렉터리로 이동하여 npm start로 시작합니다.
브라우저에 CLI가 표시되면 성공입니다.

Expo 다운로드 및 등록

위에서 Expo에 액세스 하 고 SignUp 합니다.
스마트폰이 있으면 공식 앱을 다운로드합니다.

Expo에서 개발 화면 표시

npm start 브라우저에 표시되는 화면에 QR 코드가 있으면 그것을 스마트 폰으로 읽음으로써 개발중인 화면을 표시 할 수 있습니다.

여기 오류!

내 경우에는 여기에서 오류가 발생했습니다.

error Unable to resolve "@react-navigation/native" from "App.js"

음, 처음이므로 무슨 ここち 모듈.

일단 App.js 를 공식 튜토리얼 대로, 간단하게 재작성하는 것으로 해결했습니다.

App.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

덧붙여서, Hooks에서 함수 컴포넌트로 해도 움직였습니다. ( react-native: 0.61.4 )

App.js

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

const HelloWorldApp = () => {
    return(
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text>Hello, World!</Text>
        </View>
    )
}

export default HelloWorldApp

무사히, Hello World까지 따라갔습니다.

React Native의 고유 구성 요소

통상의 JSX로 사용할 수 있는 <div> 나 <h1> 등의 컴퍼넌트 대신에 <View> 나 <Text>를 사용합니다.

- <View> : <div>や<span>
- <Text> : <p>など文字列の表示に使用

이미지 표시

Hello, World! 대신 이미지를 표시합니다.
React Native는 <img> 대신 <Image>를 제공하므로 가져오고 사용합니다.

이미지 소스를 지정하는 속성은 src 대신 source입니다.

App.js

import React from 'react';
// Imageコンポーネントをインポート
import { Text, View, Image } from 'react-native';

const HelloWorldApp = () => {
    // 画像へのパスを定義
    let pic = {
        uri: 'https://i.picsum.photos/id/237/300/200.jpg'
    }

    return(
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Image source={pic} style={{width: 300, height: 200}} />
        </View>
    )
}

export default HelloWorldApp

Props와 State는 일반 React와 동일

같은...라고 생각합니다.

다만, State의 관리는 「Redux」로 실시하는 것이 주류가 되고 있는 것 같습니다. (이것은 React Native뿐만 아니라 일반 React 프로젝트에서도 동일합니다)

요약

...다음