うろおぼえなんとか

えっと・・・・あれ・・・あれだよ・・・!たぶん・・・

React Native入門1 〜React Nativeへとうこそ!〜

time 2016/03/21

React Native入門1 〜React Nativeへとうこそ!〜

本稿では導入と、書き方をおさらいしていきます!。ただ、公式のチュートリアルをやった後に正直どうしたいいのかわからなくなったので、公式チュートリアルの拡張として情報を提供したいと思います!

※上級者の方へ、間違いなどございましたらご指摘頂けますと幸いです!

 

React Nativeとは、JavaScript(React)でネイティブアプリをかける仕組みです!Cordovaハイブリッドアプリと仕組みは違いますが、似ている感じだとご理解いただけますと幸いです!

 

やる前の確認
  • node 入ってますか!!!?
  • npm 入ってますか!!!?
  • node   バージョン大丈夫ですか(4以上にしてください!)!!!?
  • mac     持ってますか!!?(iOSアプリ開発をやっていきます!)
  • Xcode 入ってますか!!!?

以上が終わっていない場合、対応をお願い致します!

nodebrew入れてある方はnodeのバージョンアップは不要です!

 

導入編
npm install -g react-native -cli
react-native init プロジェクト名

でプロジェクトフォルダが作成されます!5分ぐらいはかかるかもしれません・・・・。
1行目のnam installについては一回インストールしたら以降は不要です。

 

開発編ーその1ー

今回はsampleAppというプロジェクト名でいきます!

react-native init sampleApp

が・・・・・

You are currently running Node v0.11.15 but React Native requires Please use a supported version of Node.
See https://facebook.github.io/react-native/docs/getting-started.html

早速怒られる・・・・
どうやらバージョンが古いみたい・・・

nodebrew use latest

サクッとバージョンあげちゃいましょう!今これを書いているmacではどうやらダウンロードしただけで満足してしまったみたいです。

nodebrew install latest

で最新版インストールができます!これやったあとで、

nodebrew use latest

使ってあげてください。

nodeは一回入れると結構めんどくさくて、インストール方法によってアンインストール方法(アップデートするのに必要だったり)が異なるので大変です・・・・。

その他のケースではhomebrew派とパッケージでインストール派がいると思います。

node -v
v5.10.1

node -vにていつでもnodeの生存がわかるのでこんなかんじでバージョンが帰ってきたらこれは生きている証なので、消してー!リライトしてー!あげる必要があります。くだらない超現象。忘らねぬ存在感ですよ。

アンインストール方法を試してだめだったら他のアンインストール方法を試す必要があります。自分の場合、仕事用windowsはインストーラーで入れて、仕事用macはhomebrewでいれて、私用macはnodebrewでいれてたので、そんなことはつゆ知らず何度もなんども同じ解決方法を試して何時間かロスしてしまいました。

個人的にはnodebrew( windowsならnodist)がオススメですのでこれを機にいれかえてみるのも手かもしれません。

 

react-native init sampleApp

気を取り直してもう一回init!!!!

お茶をいれて、動画などをみつつひたすら終了するのを待機します。

 

フォルダができました。
なにやらたくさんファイルができました。

スクリーンショット 2016-04-16 2.29.02

ios > sampleApp.xcodeprojを開いてエミュレーターを起動します。

▶︎を押しエミュレーターを起動します。

スクリーンショット 2016-04-16 2.33.19

ブッダ!すごい勢いでエラーがでました。とりあえず、nodeへの許可をしておきます。

原因はXcodeのバージョンが古かったからです。アップデートをして、もう一度チャレンジします。

ちゃんと成功すれば

勝手にエミュレーターとコンソールが動くと思いますがどちらもそのままにしておいてください。この時、赤色の画面が出るかもしれませんがコンソールでサーバーが起動しきるのをまってエミュレーターでcmd+R を押して下さい。

するとなんだかこんな感じの画面がでると思います。これで開発の準備は整いました。

スクリーンショット 2016-04-16 15.02.55

エミュレーターの種類は好きなiPhoneにできるので、、好きなiPhoneにしてください。私は6sでやっています。plusが欲しい・・・・

 

開発編-その2-
アプリケーション概要
  • conpassイベントを取得して一覧を表示
  • アイテムを押したらイベントページを開く

といった簡単なアプリケーションです。公式チュートリアルとちがってListView, NabigationBarIOSは使いません!

テキストエディターについて

xcodeは使いません。好きなテキストエディターを使ってください!ただES6を使って描いていくのでbabelとかシンタックスが読み込めるエディターがいいと思います!

コーディング

index.ios.jsを

書き換えちゃいます!

index.ios.jsの中身はこんな感じかと思います。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

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


class sampleApp 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('sampleApp', () => sampleApp);

renderメソッドにはViewとかTextとか独自のコンポーネントがあります。これらは後々になってもお世話になっていくことになるコンポーネントです。React Nativeでは独自コンポーネントはiosネイティブなコンポーネントに変換されます。ですのでDOMとしてこれらが成立しているわけではありません。

Textコンポーネントは文字を表示させるためのコンポーネントです。

Viewはdivとかspanみたいな位置づけで画面に表示させるためのコンポーネントです。

初期表示のテキストも同じようにViewとTextで構成されています。

 

 


class sampleApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          独り身の辛さ
        </Text>
      </View>
    );
  }
}

ででん。とりあえず適当にsamplaAppコンポーネントを書き換えちゃって保存して、エミュレーターでcmd+Rを押します。即時反映されました!

スクリーンショット 2016-04-16 19.55.02

このUIのショボさが悲壮感をまして、いいですね!

このようにRectNativeでは即時反映されるので一々ビルドする必要はありません。反面、GUIで画面を作れません。でも、web開発者の皆様はなれていらっしゃる・・・・!?

 

StlyleについてはCSSっぽい独自プロパティを書いていきます。

例えば、最初から書かれているStyleは

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,
  },
});

ほら、flex:1とか見たことないでしょ?あとはdisplay:’flex’ないのにflexboxみたいなプロパティ書いてたり・・・

独自といえば独自なんですが、普段使っているものと本当によく似ているのでリファレンスみればわかることが多いかと思います。flexシステムはReact Nativeで非常に重要になってくるので、後々解説します!

また、これらを生成するのには、StyleSheetモジュールのcreateメソッドを使います。コンポーネントごとに書くより、別モジュールとして書いていったほうが良いと思うので分割させます。

またこれらのStyleオブジェクトはアレイのリテラルで合成できますので非常に便利です。

  <View style={[styles.container, styles.welcome]} >
開発編-その3-

では早速、ルーティングを行ってヘッダーをつけていきましょう。NavigationBarIOSという簡単にできるすごく便利なコンポーネントがあるのですが、いろいろと曲者で自分は苦労したので、他の実装方法を紹介します。
この実装方法では、ボタン押下時の挙動・ボタンの表示方法・タイトルなどをページ単位で簡単に実装することができます。さらに自由なヘッダーをつけることもできます!
が反面書くのが面倒くさいという欠点もあります・・・・。

早速index.os.jsを編集します。Navigatorコンポーネントをインポートします。あと、管理が大変になるのでStyleは他のファイルにしちゃいます。

//index.ios.js
import React, {
  AppRegistry,
  Component,
  Text,
  View,
  Navigator
} from 'react-native';
import MainPage from './Components/MainPage';
import Style from './Style';

class sampleApp extends Component{

  _renderScene(){
    return <MainPage />;
  }

  render(){
    var _navigationBar = (
      <Navigator.NavigationBar 
        style = {Style.header}
        routeMapper = {{
          LeftButton(){
            return null;
          },
          RightButton(){
            return null;
          },
          Title(){
            return <Text style = {Style.headerText}>Header</Text>
          }
        }}
      />
    );

    return (
      <Navigator initialRoute = {{name:'mainpage', index:0, component:MainPage}} renderScene = {this._renderScene} navigationBar = {_navigationBar} />
    );
  }
}

AppRegistry.registerComponent('sampleApp', () => sampleApp);

Styleファイルはこんな感じ

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


const Style = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop:60
  },
  header:{
    backgroundColor:'#afeeee',
    height:50,
  },
  headerText:{
    color:'#FFFCDB',
    fontSize:20,
    marginTop:5
  }
});

module.exports = Style;

サクッと作ったMainPage.jsはこんな感じ。これはComponentフォルダを作ってその直下におきます。

//MainPage
import React, {
  Component,
  Text,
  View,
} from 'react-native';
import Style from './../Style';

export default class MainPage extends Component{
	render(){
		return (
			<View style = {Style.container}>
				<Text>
					this is MainPage
				</Text>
			</View>
		);
	}
}

階層関係はこんな感じ。
スクリーンショット 2016-04-18 0.21.35

実行結果はこんな感じ
スクリーンショット 2016-04-18 0.23.05

ん〜マンダム。
やっていることとしてはindex.ios.jsはルーティングを行っていて、MainPage.jsはthis is MainPageっていうテキストを表示、Style.jsはStyleを定義しています。

    var _navigationBar = (
      <Navigator.NavigationBar 
        style = {Style.header}
        routeMapper = {{
          LeftButton(){
            return null;
          },
          RightButton(){
            return null;
          },
          Title(){
            return <Text style = {Style.headerText}>Header</Text>
          }
        }}
      />
    );

index.ios.jsのsampleAppコンポーネントのrenderメソッドにあるこの記述はまさにヘッダー定義しています。
routeMapperにはLeftButon, RightButton, Titleプロパティを定義します。これはまさに名前の通りです。今は常にHeaderというタイトルを返すだけですが、ゆくゆくはrouteを使って、戻るボタンとかを自由に記載させていきます。

同じくrenderメソッドにある

  _renderScene(route, navigator){
    return <MainPage />;
  }
//略

    return (
      <Navigator initialRoute = {{name:'mainpage', index:0, component:MainPage}} renderScene = {this._renderScene} navigationBar = {_navigationBar} />
    );

ですが、initialRouteでは初回で表示されるコンポーネントを記載します。nameについては非常に重要ですが後で説明します。indexも!componentにはcomponentを記載します。
renderSceneには表示させるコンポーネントを振り分ける処理を書きます。今は特にないのでMainPageを書いときました!後々ここもNavigationBarのように振り分け処理を記載します。また、ここでnavigationBarが何者であるかを記載します。

長くなってきたのでここら辺でおいとまします!
次回へ続く・・・・!

次回!React Native 入門2 〜ナビゲーション カスタマイズ〜

コメント

down

コメントする




プロフィール

@YutamaKotaro

へっぽこふろんとえんどえんじにあ

デザインセンス虚無。何か作るたび、「デザインこれでいいんですか?」と言われますが、「これでいいんです」とおもってるから出したんです・・・!
twitter最近始めたのでふぉろーしてくださると嬉しいです!(@YutamaKotaro)