がべーじこれくしょん

技術系とかいろいろ

ReactNative事始め

最近話題のReactNativeですが、ハッカソンを控えている関係もあって、どんなものか試してみました。

記事は随時更新されていく予定です。

※この記事の内容は、公式ドキュメントのまとめになります。

facebook.github.io

必要なもののインストール [WIP]

(TODO: 公式ドキュメントでは趣旨からそれるため割愛されている部分をそのうちメモっておかなければならない)

brew install node
brew install watchman

The Basics

Getting Started

facebook.github.io

create-react-native-appのインストール

ReactNativeのプロジェクトを作成するには、create-react-native-appというnpmパッケージを利用すると非常に楽です。

※ちなみに、既存のネイティブアプリにReactNativeを導入したい場合は、Getting Startedの「Building Projects with Native Code」をご覧ください。

以下コマンドを実行してインストールします。

npm install -g create-react-native-app

プロジェクトの作成

ReactNativeプロジェクトを作成するには、以下コマンドを実行します。

この場合は、現在いるディレクトリに「HelloWorld」という名前でプロジェクトフォルダが作成されます。

create-react-native-app HelloWorld

インストールが正常に完了すると、以下のような説明がでてきます。

Success! Created HelloWorld at /Users/Hoge/fuga/HelloWorld
Inside that directory, you can run several commands:

  yarn start
    Starts the development server so you can open your app in the Expo
    app on your phone.

  yarn run ios
    (Mac only, requires Xcode)
    Starts the development server and loads your app in an iOS simulator.

  yarn run android
    (Requires Android build tools)
    Starts the development server and loads your app on a connected Android
    device or emulator.

  yarn test
    Starts the test runner.

  yarn run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd HelloWorld
  yarn start

Happy hacking!

上記ログにはyarnを使うような説明になってますが、npmでも同様に実行できます。

実行

プロジェクトを作成したら、試しに実行してみましょう。

実機ブラウザ上で実行する場合

以下コマンドを実行すると、サーバーが起動しアクセスを受け付けるようになります。

cd HelloWorld
npm start

コマンドのログと一緒にQRコードが表示されます(すごい)。

これをPCと同じLAN上にいるスマホで読み取り、ブラウザで開きます。

シミュレーター上で実行する場合

実行にはmacOS環境が必要です

cd HelloWorld
npm run ios
cd HelloWorld
npm run android

Learn the Basics

facebook.github.io

React NativeはReactのようですが、Webコンポーネントの代わりにネイティブコンポーネントを使用しています。React Native appについて理解するには、Reactの基本的な概念(JSXやコンポーネントstatepropsなど)について知っておく必要があります。すでにReactについて知っていたとしても、ネイティヴコンポーネントなど、React Native特有のものについても知っておく必要があります。このチュートリアルは、Reactの経験の有無に関係ないすべての人向けです。

Hello World

まずはおなじみのHelloWorldから。

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

export default class HelloWorldApp extends Component {
    render() {
        return (
            <Text>Hello world!</Text>
        );
    }
}

※公式サイトにはWebシミュレーターがあるので、直接動作が確認できます。

What's going on here?

[WIP]

Components

[WIP]

このアプリ、あんまイケてないよね

「いいセンスだ。コンポーネントにもっと面白いことをさせるには、Propsについて学ぶといい。」

Props

facebook.github.io

[WIP]

State

facebook.github.io

[WIP]

Style

facebook.github.io

[WIP]

Height and Width

facebook.github.io

[WIP]

Layout with Flexbox

facebook.github.io

[WIP]

Handling Text Input

facebook.github.io

[WIP]

Handling Touches

facebook.github.io

[WIP]

Using a ScrollView

facebook.github.io

[WIP]

Using List Views

facebook.github.io

[WIP]

Networking

facebook.github.io

[WIP]

More Resources

facebook.github.io

[WIP]