React Native入門 1 インストールとレンダリングの仕組み

React Nativeとは

Facebookが開発したReactというコンポーネント志向のフロントエンドフレームワークで、ネイティブアプリを作れます。

今回扱う範囲

今回は、React Nativeをインストールし、実際にコードを眺めることで、どのように画面が実際に描画されるのか(レンダリング)を学びます。

CLIツール

とりあえず、Homebrewを入れるところから始めます。
http://brew.sh/index_ja.html
Homebrewは、macで使えるパッケージ管理のソフトウェアです。

$ brew install node
$ brew install watchman
$ npm install -g react-native-cli

これで、ReactNative開発環境をインストールできます。ここからは、実際にアプリを起動してみましょう。

$ react-native init trainee
$ cd tainee/
$ react-native run-ios

initにより、色々なフォルダが生成されます。今回は、App.jsのみに注目します。

App.js

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

まずは、classのコードです。
App.jsの中でexport default class hogehoge とすることで、このクラスがアプリのトップにレンダリングされます。

App.js

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

使えるTagはたくさんあるが、基本的には、Image、Text、Viewなどを使用します。
Textの中の文字とかを少し変更して

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello World!!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

simulatorをリロード(コマンドR)すると、実際に変更されていることがわかると思います。

次は、styleに注目します。

App.js

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

ここで、それぞれのコンポーネント(TextとかImageとか)のスタイルを定義する。例えば

App.js

  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },

これは、fontSizeが 20で、テキストを真ん中におき、テキストのまわりに10のスペースを空けて表示するというスタイリングです。
このwelcomというスタイルが、class Appの中のTextタグの一つに入っています。

App.js

<Text style={styles.welcome}>
    Welcome to React Native!
</Text>

これにより、stylesの中で定義したwelcomeを、Textの中で、<Text style={styles.welcome}>のように書くことで、定義したスタイリングを使用することができます。

App.js

  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
　　　　　　　　color: "red"
  },

このようにして、再びsimulatorをリロードすると、Welcome to React Native!が赤くなっているはずです。

もう少し細かい文法

exportについて

exportとは、別ファイルでimportしたいクラスに、明示的に書くものです。
importとは、違うファイルに書いたクラスや関数などを、自分のファイルでも使えるようにするための仕組みです。

書き方としては2パターンで、

export default class App

あるいは、

export class App

の2つです。
export defaultと書く場合は、

• 一つのファイルに一つのexportまで
• import するときは {} を外す(defaultでexportしない場合は、import { App } from './App' とする)

というルールがあります。基本的にこれを守らないとエラーがでます。

defaultとして書くことのメリットとして、importするときに、名前を自由に変えられることがあげられます。
例えば、App.jsの中で、Appという名前のコンポーネントを作り、それを違うファイルからimport するときに

import App from './App'

という風にインポートするのが普通ですが、

import AwsomeApp from './App'

という風に違う名前でimportsすることもできます。これは、defaultを使用するときは一つのファイルに一つまでしかexportできないという性質があるため、このようなことができるということです。(たぶん)

extendsについて

export default class App extends Component

次は、Appの後ろに続く、extends Componentの説明をします。これは、ComponentクラスをAppが継承するという意味です。

継承をすることで、継承元のクラスの機能(関数、変数)とかを、継承先で使えるようにすることができるのです。

class Appの中にもある関数のrender関数がその例です。

App.js

render(){
  return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
  )
}

コンポーネントの画面を作るときに使われるこのrender関数は、Componentクラスの中で定義された関数で、返り値を画面にレンダリングするという機能が、Componentクラスの中で定義されているため、render関数の中のreturnの中にコンポーネントを書いていけば、画面に表示されるという仕組みです。

まとめ

今回は、ReactNativeの大まかな仕組み、画面実装の仕方などを説明しました。
次回は実際にコポーネントを自分で実装するところに関してまとめてみようと思います。