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との違いをピックアップしていきます

環境構築

あらかじめ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を押すと開発者向けメニューが表示されます

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と同じです

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を使います

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属性に入れてあげれば適用されます

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を使います

<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でアプリを作るために学んだことをざっとリストアップしてみました
ここまでのことを知って入れば基本的なアプリは作れると思います

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