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

1 はじめに
2 開発、デバッグ方法
3 reactの構文について
- 3.1 スタイルの定義
4 続く
- 4.1 Share this:

はじめに

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

Expo CLI(旧create-react-native-app)を使って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の上から２行目で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',
  },
});