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

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

フロントエンドエンジニアが思うReact Native

いまさら感はなきにしも。

Xcode7からお布施なしで実機インストールができるようになったので、これはもしやワンチャンあるかと思って調べたことのメモです。

そもそもなにこれ

React Native | A framework for building native apps using React

ひとことで言うと、Reactでコード書けばiOSとかAndroidのアプリが作れるぜ!ってやつ。

ただそれなら「jsしか書けない我々でも、いろんなアプリが楽々作れちゃう」かと思いきや、それはちょっとダウトです。

できること・できないこと

iOSのタブとかリストとか標準UIを、Reactのコンポーネント感覚で使えるのでそのへんはまぁできる。
みんな大好きToDoAppくらいなら楽勝で作れてそのあたりはいい感じ。

ただアプリにしたい最大の理由って、「端末のネイティブ機能を使いたいから」なはず。
そのへんも標準のコンポーネントAPIとしてある程度用意されてるけど、ミュージックのライブラリとかカレンダーとか一部は用意が間に合ってないやつもある。

そういうのが出てきた時には、自分でネイティブ機能とのブリッジ実装を書く必要がある、と。

まぁそうなるとガッツリObjective-CかSwiftで頑張る必要があって・・・。

現状、ここにないコンポーネントAPIは現状ありません!

ActivityIndicatorIOS
DatePickerIOS
DrawerLayoutAndroid
Image
ListView
MapView
Modal
Navigator
NavigatorIOS
PickerIOS
Picker
ProgressBarAndroid
ProgressViewIOS
RefreshControl
ScrollView
SegmentedControlIOS
Slider
SliderIOS
StatusBar
Switch
TabBarIOS
TabBarIOS.Item
Text
TextInput
ToolbarAndroid
TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback
View
ViewPagerAndroid
WebView

これがコンポーネントで、こっちがAPI

ActionSheetIOS
Alert
AlertIOS
Animated
AppRegistry
AppStateIOS
AppState
AsyncStorage
BackAndroid
CameraRoll
Clipboard
DatePickerAndroid
Dimensions
IntentAndroid
InteractionManager
LayoutAnimation
Linking
LinkingIOS
NativeMethodsMixin
NetInfo
PanResponder
PixelRatio
PushNotificationIOS
StatusBarIOS
StyleSheet
TimePickerAndroid
ToastAndroid
VibrationIOS
Vibration

というわけで

我々フロントエンドエンジニアがjsだけでいろんなアプリを作るのは現状では無理。
どうしても作りたいならSwift力とXcode力を高めるしか選択肢がないわけで、ただそうなってくるともはやReact Nativeってなんだっけ?となる未来が見える!

まぁReact Nativeのバージョンは2016/05/29現在0.26なので、しばらく待ってれば今はないコンポーネントAPIが充実してくるはずということで、そこに期待かなー。

ちなみにこのブリッジはObjective-Cで書くらしいので、世のObj-Cおじさん!おねがい!!

もしくはライブラリとして公開してくれてるやつを探しだして、それを使う。
まぁそれにしてもヘッダに追記したりインポートしたりXcode力が試されます。

その他のメモ

react-native init するとObjective-Cのプロジェクトができる

今の時代はSwiftだろ!っても、今のところその選択肢はないっぽい。
自力でSwiftのプロジェクト作って、そこにReact Nativeを組み込むことももちろんできるけど、それには多大なるXcode力とSwift力が必要で、散々調べた結果このGistが一番惜しい感じ。

Creating a Swift-ReactNative project · GitHub

まぁそれでも上手くいかんかったんやけどね・・・!

localhostのサーバーにつながらない

Xcodeでビルドすると、ターミナルが立ち上がってサーバーが立ち上がる。
で、そこにコードが置いてあって、ガワアプリがコードをフェッチするってな具合で動いてるんやけども、まぁ実機で見たりすると`localhost`が解決できずににつながらないと。

そんなときは、そのアドレスを変更するべし。

`AppDelegate.m`にある、`jsCodeLocation`ってやつをマシンのIPに書き換えて、端末と同じネットワークにつなげば通るようになった。

jsはJavaScriptなのか

某UnityとかやとjsですっつってJavaScriptモドキやったりするよねってことで、React Nativeで書けるjsはどんなものなのかというと。

JavaScript Environment

ここに書いてあるように、一部のES2015とかES7、JSXはもちろんfetchとかまでPolyfillされてたりする。
中で動いてるのはBabelっぽい。