자바스크립트밖에 모르는 초보자의 React Native 입문

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

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

대상 독자


  • 모바일 앱 개발을 한 적이없는 사람
  • 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 프로젝트에서도 동일합니다)

    요약



    ...다음

    좋은 웹페이지 즐겨찾기