React経験者のためのReact Native入門

React経験があった僕がReact Nativeでアプリを作ってみた話です
webのReact経験者がReact Nativeでアプリを作るために知っておく必要があることを中心に書いていこうと思います

# 実際にアプリを作ってみた感想
結論から言うと、React Nativeを使ったらめちゃくちゃ簡単にアプリが書けました
ほとんどwebです。Reactでwebを書く感覚でアプリを作れます。すごい。
ReactにあるライブラリはReact Native版もほとんどあります

新しく勉強しなくちゃいけないことはほんとに少しだけです

（ほんとは運用するとこまで書きたかったけどrejectされてしまいました…）

# 環境
react 16.0.0
react-native 0.50
macOS
iOS

# 勉強すべきこと
ドキュメントを読みましょう、それに尽きます
サンプルも充実していて非常にわかりやすく、React未経験者でもわかるように書いてあります
https://facebook.github.io/react-native/docs/getting-started.html

この中でもReact経験者が見るべきところ + webとの違いをピックアップしていきます

## 環境構築
https://facebook.github.io/react-native/docs/getting-started.html

あらかじめnodeとwatchmanを入れておきます
watchmanはファイルの変化を監視するためのツールです

```
$ brew install node
$ brew install watchman
```
npmでreact-native-cliをインストールします

```
$ npm install -g react-native-cli
```
さらにiOSアプリをビルドするためにXcodeが必要です。XcodeをインストールするiOSシミュレータもインストールされます
XcodeはApp Storeを通してインストールしましょう
Xcodeはバージョン8以上、`Preferences > Locations`からコマンドラインツールを最新にする必要があることに注意です

いよいよプロジェクト作成です

```
$ react-native init （自分のプロジェクト名）
```
これだけです
プロジェクトが作られたらシミュレータを起動してみましょう

```
$ react-native run-ios
```
これで基本となる環境構築は終わりです
この状態でファイルを編集すると、webと同じように自動的に変更が反映されます


## デバッグ
https://facebook.github.io/react-native/docs/debugging.html
シミュレータでアプリを立ち上げた状態で `⌘D`を押すと開発者向けメニューが表示されます
<img width="316" alt="スクリーンショット 2017-12-06 20.25.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/170626/9d5cd895-9588-1c31-68b5-d36c9acd36b4.png">
`Debud JS Remotely`を有効にするとchromeでconsoleが見れるようになります
`Toggle Inspecter`を有効にすることでインスペクターを見れます
他にもいくつかオプションがあるので色々試して見ましょう

## Reactとの共通点
https://facebook.github.io/react-native/docs/props.html
https://facebook.github.io/react-native/docs/state.html
Componentの概念はReactと同じです

```.js
import React, { Component } from 'react';

class HogeComponent extends React.Component {
  ...
}
```
ComponentはReactのものを使うので、もちろんprops, state等もReactと同様に使えます

## HTML要素は使えない
https://facebook.github.io/react-native/docs/components-and-apis.html
ドキュメントを見るとわかるようにdivやpのようなhtml要素の代わりにView, Textのような基本Componentを使います

```.js
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}
```
基本Componentの一覧はリンク先のドキュメントでチェックしましょう
アプリに適したComponentが揃っているので、個人的には違和感なくむしろHTMLより快適に書ける印象です
生のテキストはTextの中でしか書けない等の制約があるので注意しましょう

## CSSはちょっと違うけどだいたい同じ
https://facebook.github.io/react-native/docs/style.html
styleはほとんどWEBのCSSと同じです
ただし、json形式でキャメルケースで書きます
以下のように`StyleSheet.create`でstyleのオブジェクトを作り、Componentのstyle属性に入れてあげれば適用されます

```.js
import React, { Component } from 'react';
import { StyleSheet, Text } from 'react-native';

export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});
```
基本はWEBのCSSと同じですが、shadowなどは独自の仕様になっていたりするのでコンパイルが通らなかったらリファレンスを調べて見ましょう

## flex layoutが推奨
https://facebook.github.io/react-native/docs/next/flexbox.html
アプリでは画面いっぱいに広がるデザインが多く、デバイスも多様なためflexboxを用いたスタイルが推奨されているようです
もちろんfloatなども使えます

## react-nativeに依存しているライブラリを使うはlinkが必要
以下で紹介するreact-native-svgなど、ライブラリの中にはreact-nativeに依存しているものがあります
そのようなライブラリを使う時にはインストールしたあとに紐付けをする必要があるらしいです

```
$ npm install react-native-svg --save
$ react-native link
```
（ここの話はあまり理解できてないので詳しい方、わかりやすい記事をご存知の方がいたら教えていただきたいです）

## SVGが使えない
React Nativeで画像を表示するときはImageを使います

```.js
<Image source={require("./assets/check.png")} />;
```
しかしデフォルトではSVGを読み込むことができません
SVGを使いたい時にはreact-native-svgを使いましょう
https://github.com/react-native-community/react-native-svg
これでSVGを描画できるようになります
さらにファイルのURIから読み込む場合はreact-native-svg-uriを使います
https://github.com/vault-development/react-native-svg-uri

ただし、僕の環境ではSVGファイルに改行があったりすると正常に読み込んでくれませんでした
仕方なく、以下のサイトでフォーマットしてからSVGを使いました
(もっといい対処法があれば誰か教えてください、、)
https://jakearchibald.github.io/svgomg/

## Animation
https://facebook.github.io/react-native/docs/next/animations.html
アニメーション用にAPIが用意されています。

# 最後に
React Nativeでアプリを作るために学んだことをざっとリストアップしてみました
ここまでのことを知って入れば基本的なアプリは作れると思います

間違っていること、補足等があればどんどんコメントください！