JavaScriptしか知らない初心者の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プロジェクトでも同じ）

まとめ

...続く