アジェンダ

ReactNativeのメリットデメリットとデバック
プロジェクト作成
Reactの概要
Flexbox Layoout
ScrollViewとListView
ライブラリ
実機ビルド
iOS申請
参考資料

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

・Reactを用いてiOSやAndroidのネイティブアプリを構築できるフレームワーク
・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があります。

Props
Componentは、異なるパラメータとともにカスタマイズできます。これらのパラメータは、propsと呼ばれます。例えば, １つの基本的なReact NativeのコンポーネントはImageです。画像を表示するのを制御したいときは、sorceという名前のpropを使います。 Link (https://facebook.github.io/react-native/docs/props.html#content)
State
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を指定できないことです。
重ね順を変更するにはコンポーネントの順序を変えることで対応します。

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/)

24ways.org

CssのWritingModeというプロパティに関して勉強します。

文字組み(Writing System)には、4つのWriting Modeがあります。

1. Latain-based systems ( 英語など... )

2. Arabic-based systems ( アラビア文字など... )

3. Han based systems ( 中国語、日本語、韓国語など... )

4. Mongolian-based systems ( モンゴル文字など... )

writing-modeには、ベンダープレフィックスがあります。

-webkit-writing-mode: ◎

-ms-writing-mode: ◎

writing-mode: ◎

writing-modeの特徴 → floatのように高さがなくなる?次の要素と同じ高さになる。

例 1 )

```

writing-mode: vertical-rl; (縦にする)

transform: rotate(180deg); (180度角度が変わる)

text-orientation: upright; (文字間隔が広くなる)

text-transform: uppercase;(大文字にする)

```

( Hatena Blogで試してみるとこのように見えます⇩ )

f:id:tech-master:20161226143831p:plain

tech-master’s diary

React nativeについて