フロントエンドエンジニアが思う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で頑張る必要があって・・・。
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
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おじさん!おねがい!!
obj-cおじさんがreact-nativeにネイティブ機能のビルトインを実装しまくってくれる日を待つしかない
— りぃ (@leader22) 2016年5月29日
もしくはライブラリとして公開してくれてるやつを探しだして、それを使う。
まぁそれにしてもヘッダに追記したりインポートしたりXcode力が試されます。
その他のメモ
react-native init するとObjective-Cのプロジェクトができる
今の時代はSwiftだろ!っても、今のところその選択肢はないっぽい。
自力でSwiftのプロジェクト作って、そこにReact Nativeを組み込むことももちろんできるけど、それには多大なるXcode力とSwift力が必要で、散々調べた結果このGistが一番惜しい感じ。
まぁそれでも上手くいかんかったんやけどね・・・!
localhostのサーバーにつながらない
Xcodeでビルドすると、ターミナルが立ち上がってサーバーが立ち上がる。
で、そこにコードが置いてあって、ガワアプリがコードをフェッチするってな具合で動いてるんやけども、まぁ実機で見たりすると`localhost`が解決できずににつながらないと。
そんなときは、そのアドレスを変更するべし。
`AppDelegate.m`にある、`jsCodeLocation`ってやつをマシンのIPに書き換えて、端末と同じネットワークにつなげば通るようになった。
jsはJavaScriptなのか
某UnityとかやとjsですっつってJavaScriptモドキやったりするよねってことで、React Nativeで書けるjsはどんなものなのかというと。
ここに書いてあるように、一部のES2015とかES7、JSXはもちろんfetchとかまでPolyfillされてたりする。
中で動いてるのはBabelっぽい。