React Nativeを始める時の覚書です。

Node.jsが入ってる前提で書きます。

インストール

公式サイトの通り進めればいいですが、Nodeが入っていれば以下をターミナルで打つだけでいいです。

npm install -g react-native-cli

プロジェクト作成

インストールが終わったら、ターミナルでプロジェクト作成のコマンドを打ちます。

react-native init [プロジェクト名]

例えば、こんな感じです。（ここけっこう時間かかります）

react-native init AwesomeProject

するとファイル一式ができます。

で、公式サイトにはこの後、プロジェクトフォルダに移動して、
「react-native run-ios」を打つようにと書いてますが、このままやるとエラー出ます。なんなんだよ…。

Xcodeでやればなんとかなります。

Xcodeで開発する場合

Xcodeで開発する場合、生成された「ios」ディレクトリ以下の「プロジェクト名.xcodeproj」を開くと、Xcodeが立ち上がります。

そして、左上で好きなデバイスを選び、「▶︎」ボタンをクリックして、ビルドに成功するとエミュレーターが立ち上がります。
勝手にターミナルも立ち上がりますが、そのままにしておきます。

そういえば、以前はAppleにデベロッパー料金払わないと実機で確認できませんでしたが、今はAppleアカウントもってるだけでいけるんですね。

ちょっとコードをいじってみたい場合は、index.ios.jsを開いてみてください。

index.ios.js

/**
 * Sample React Native App
 *
 * @flow
 */
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
class AwesomeProject 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 index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </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,
  },
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

修正したら、エミュレーターで「cmd ＋ R」で更新できます。

ただ、デバックとかどうしたらいいんだろう…。

あと、2つ目作ってエミュレーター立ち上げようとするとエラー出て、npm startしろみたいなこと言われるけど、これもなんだろう…。（プロジェクトごとにnpm startしたらエラー消えた）
これか

と、まだまだ分からないこと多いですが、始めるまでは簡単ですね。

何か簡単なアプリを作ってみようと思います。