プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

Expo CLIを使ってnativeアプリ開発入門編①

はじめに

前回の記事で開発環境を作りました。

今回は実装部分をかるーくだけ触ってみて全体構成を少し把握するのを目的に。

開発、デバッグ方法

前回、npm startでアプリを立ち上げ、端末(ここではiPhone)を使って初期状態のプロジェクトを開くところまでやったので、まずは表示させる内容を変えてみたいと思います。

プロジェクトディレクトリ配下のApp.jsを以下に変更

  render() {
    return (
      <View style={styles.container}>
        {/* <Text>Open up App.js to start working on your app!</Text> */}
        <Text>これは僕のアプリです!</Text>
      </View>
    );
  }

初期状態のメッセージをコメントアウトし、自分で日本語で文章を追加しました。

そしてctrl+sで変更を保存すると、buildが走り、さらに端末側でもオートリロードで動的に内容が反映されます。便利。

あえてエラーがでるようにしてみると、以下のようになりました。(閉じタグを抜いています)

いかにもダメな感じが全面に出ていてとてもわかりやすいです。
エラーを解消したタイミングでは端末側のリロードが走らないようなので、下のほうに出ている「Reload JS」をタップして再読み込みします。

こんな感じでちょこちょこ触っていきます。

reactの構文について

reactを触ったことがあれば見慣れた構成ですが、そうでない方に向けておさらい。

App.jsに記述している内容は、App class(コアのReact.Component classを継承)を定義し、render内にあるreturnの中身を返しています。

returnの中

 <View style={styles.container}>
   <Text>これは僕のアプリです!</Text>
 </View>

viewとかtextとか、HTMLっぽいけど違うっていう違和感を覚えますね。
react ではcomponentを使い定義を読み込むことができます。
ここではreact nativeで予め定義済みのcomponentを読み込んでいます。

App.jsの上から2行目でcomponentのimportをしています。

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

試しにTextやViewの部分にエディターを使って定義に移動すると、node_modulesの中にあるファイルに飛んでいくのが確認できます。

スタイルの定義

もう一つ、14~21行目ではcssっぽいのが確認できます。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

stylesのcontainerの中身を、View componentのstyle propsとして渡しています。

毛色は少し違いますが、cssがわかればstyleの指定は特に悩まなそうですね。
ポイントはcssでの「background-color」は「backgroundColor」のようにハイフンが使えない代わりにキャメルケースで書きます。

試しに既存のスタイルを変更し、テキスト部分には新たにスタイルを追加してみます。

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>これは僕のアプリです!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#999',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'red',
  },
});

指定した通り、背景が白から薄暗くなり、文字色が赤になっています。

続く

reactでまず覚えておきたいのはcomponent、state、propsあたりなので、react nativeでもこれらを組み合わせてアプリケーションを作っていく感じになります。