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でアプリを作るために学んだことをざっとリストアップしてみました
ここまでのことを知って入れば基本的なアプリは作れると思います
間違っていること、補足等があればどんどんコメントください！