ReactNativeアプリの作り方::HelloWorld

ReactNative

このページの目標

クライアントアプリケーションの作り方

一般的にクライアントアプリケーションはUIコンポーネントの集合体なので、「コンポーネントの作り方」と「レイアウトの組み方」が理解すると静的なアプリケーションが作成出来ます。 前半はReactNativeでのコンポーネントの作り方とレイアウトの方法を説明していきます。

コンポーネントとは？

Cookpadアプリを例にすると、"ヘッダー"と"メイン"と"フッター"の大きく３つのコンポーネントに分類できます。 それぞれのコンポーネントは更に小さいコンポーネントに分類できます。例えば"ヘッダー"を作るなら下記のような手順になるでしょう。

他のコンポーネントも複雑度は違いますが手順が増えますが大枠は同じです。

f:id:kazy1991:20180724044849p:plain

HelloWorld!

ReactNativeではReactの作法でコンポーネントを作成します。

  • React.Component を継承したクラスを作る
  • render メソッドに表示したい内容を書く

WebのReactと異なる点はrender内で<div>要素などの要素を利用するかreact-nativeが用意したコンポーネントを利用するかの違いのみです。

公式ドキュメント上でReactNativeの振る舞いを試す事が出来るので、このページでHelloWorldを表示させましょう。 https://facebook.github.io/react-native/docs/tutorial.html#hello-world

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Hello world!!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'gray',
    fontSize: 32,
  },
});

カスタムコンポーネントを描画する

View, Text などと同様に自作コンポーネントも簡単に描画する事が出来ます。BuleTextComponentという青い文字列の"HelloWold!"を表示するコンポーネントを作って先程のコードに追加して自作コンポーネントが描画されることを確認しましょう。
ReactNativeの開発ではあるまとまったUIパーツを一つのコンポーネントに纏めることで見通しを良くしたり、再利用性を高めたりします。

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Hello world!!</Text>
        <BlueTextComponent />
      </View>
    );
  }
}

class BlueTextComponent extends React.Component {
  render() {
    return (
      <Text style={{color:'blue'}}>Hello world!!</Text>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'gray',
    fontSize: 32,
  },
});