読者です 読者をやめる 読者になる 読者になる

React nativeについて

アジェンダ

  1. ReactNativeのメリットデメリットとデバック
  2. プロジェクト作成
  3. Reactの概要
  4. Flexbox Layoout
  5. ScrollViewとListView
  6. ライブラリ
  7. 実機ビルド
  8. iOS申請
  9. 参考資料

0.ReactNativeのメリットデメリット

・Reactを用いてiOSAndroidのネイティブアプリを構築できるフレームワーク
JavaScriptからネイティブのAPIが呼ばれる
・一度覚えればどのプラットフォーム向けにも書けるようになる

メリット

  • ネイティブアプリがJavaScriptで書ける
  • アプリを素早くビルドできる
  • CSSのサブセットがあるため、CSSでスタイリングできる

デメリット

  • ロジックはJavaScriptのため、重い処理が苦手
  • 複雑なUIになると、ネイティブコードを書かざるを得なくなる

デバッグ

⌘+Dでメニュー画面表示(iosの場合)

  • Debug JS Remotely - デベロッパーツールの機能が利用できる
  • Enable Live Reload - 保存のたびにリロードが走る(初期画面に戻る)
  • Enable Hot Reloading - 保存時に現在表示してる画面のままリロードが走る
  • Show Inspector - アプリのレイアウト確認ができる
  • Show Perf Monitor - パフォーマンスの確認ができる

1. プロジェクト作成

brew install node
brew install watchman
npm i -g react-native-cli
react-native init test && cd test
react-native run-ios

2.Reactの概要

Reactは Component というモジュールを使い、複数のComponentを組み合わせて実装します。 そして、コンポーネントがもつ値には、データをコントールする為にpropsとstateがあります。

class Text extends Component {
   constructor(props) {
     super(props);
     this.state = {
       showText: true
     };

     setInterval(() => {
      this.setState({
        showText: !this.state.showText
      });
     }, 1000);
   }

  render() {
    const text = this.state.showText? this.props.text : '';
    return (
      <div>
        <span style={{color: "red"}}>
          {text}
        </span>
      </div>
    );
  }
}

3. Flexbox Layoout

React Nativeでのレイアウトは、css flexboxと同じ設計を利用します。

render() {
  return (
    <View style={{flex: 1}}>
      <View style={{flex: 1, backgroundColor: 'powderblue'}} /> 
      <View style={{flex: 2, backgroundColor: 'skyblue'}} />
      <View style={{flex: 3, flexDirection: 'row'}} >
        <View style={{width: 30, backgroundColor: 'darksalmon'}} /> 
        <View style={{flex: 1, backgroundColor: 'lightsalmon'}} /> 
        <View style={{width: 100, backgroundColor: 'peachpuff'}} />
      </View> 
    </View>
  );
}

flexプロパティは要素の伸び率を指定できます。
上記は各Viewコンポーネントの高さ比率を1:2:3にしています。
親のViewにflex: 1を指定することで、画面全体に領域を広げています。
これによって、デバイスサイズに関係なくレイアウトすることができます。

flexDirectionではflexboxで要素を並べる方向を定めることができます。
デフォルトの縦方向がcolumn、横方向がrowです。
要素を固定長で指定することもできます。width: 40など。
他にも様々な関連プロパティがあり、柔軟にレイアウトすることができます。
cssとの違いはいくつかありますが、重要なのはz-indexを指定できないことです。
重ね順を変更するにはコンポーネントの順序を変えることで対応します。

Flexbox Layoout

4. ScrollView

スクロール領域を指定したい場合は、ScrollViewもしくはListViewで指定する必要があります。 それぞれの違いは以下です。

  • ScrollView
    要素が小さくて大きさが限られたものを表示する
    要素は基本的に不変

  • ListView
    要素が長いリスト
    要素が動的に変更される
    ScrollViewの内容は端末内であらかじめ全てレンダリングされます。
    ListViewはスクロールされた時に画面に入った要素をその都度レンダリングします。

      <ScrollView>
        <View style={{height: 400, backgroundColor: 'powderblue'}} >
          <Text style={{fontSize: 100}}>hoge</Text>
        </View>
        <View style={{height: 400, backgroundColor: 'skyblue'}} >
          <Text style={{fontSize: 100}}>fuga</Text>
        </View>
        <View style={{height: 400, backgroundColor: 'deepskyblue'}} >
          <Text style={{fontSize: 100}}>foo</Text>
        </View>
        <View style={{height: 400, backgroundColor: 'dodgerblue'}} >
          <Text style={{fontSize: 100}}>bar</Text>
        </View>
      </ScrollView>

5. ルーティング

import React, { Component, PropTypes } from 'react';
import { AppRegistry, Navigator, Text, TouchableHighlight, View } from'react-native';

class MyScene extends Component{
  static propTypes = {
    title: PropTypes.string.isRequired
  };
  render() {
    return (
      <View style={{padding: 30}}>
        <Text>タイトル:{this.props.title}</Text>
      </View>
    );
  }
}

class AwesomeProject extends Component {
  render() {
    return (
      <Navigator
        initialRoute={{title: 'MyInitialScene', index: 0}}
        renderScene={ (route,navigator) =>
          <MyScene title={route.title}/>
        }
      />
    )
  }
}

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

6. ライブラリ

React Native向けのライブラリはnpmで提供されています。
ほとんどがnpm installで利用できますが、ものによっては設定ファイルを編集する必要があります。
Link: ( https://react.parts/native )

7. ReactNarive上のSyntax

Links1: ( http://facebook.github.io/react-native/docs/javascript-environment.html#javascript-syntax-transformers ) Links1: ( http://lealog.hateblo.jp/entry/2016/05/29/233244 )

8. シュミレーターで実機ビルド確認

test/ios/test.xcodeprojにプロジェクトファイルがあります。 xcodeを開いて、再生マークをクリックします。

9. iOS申請

Link1: (http://examination-03.hatenablog.com/) ... (to be continued)

10. 参考資料

Link1: (https://github.com/besutome/slides/tree/master/20161016-ReactNative-handson)
Link2: (https://github.com/besutome/slides/tree/master/20160918-react-handson)
Link3: (http://yutamasun.sakura.ne.jp/blog/2016/03/21/react-native-01/)