ReactNativeとは
ネイティブUI型
簡単な説明としては以下
ネイティブUI型の場合、OSの中にあるネイティブレンダーを利用してUIを描画します。そのためアプリ側ではレンダリングを正確にコントロールすることはできません。
メリット
1. OSに合わせたUIデザインになるため、それぞれのユーザーが操作しやすくなる。
それはそれでアリだよなぁってonigiri.w2.icon
わざわざ、iOSとAndroidでデザインと統一する必要があるのかどうか。
デメリット
1. デザインがOS依存のため、OS間でデザインを統一できない。
2. 結局OSごとに細かい設定が必要になる可能性が多分にある。
3. レンダリング処理速度が遅い。
これは結構きつい....orzonigiri.w2.icon
なので、レンダリング速度とかも早いんだとか。
プロトタイプ的に効率的にアプリ開発を進めたい
デザインや機能しようがコントロールできるようなアプリ(技術的制約と戦わなくてい)
将来的にプロダクトの成長に伴ってネイティブコードへのアクセスがどうしても必要になるという場合は、Expo を eject して使うという方法もあるようです。
つまり Expo での高速開発の恩恵を受けつつプロダクト自体が成長したタイミングで、eject して運用。将来的にはネイティブアプリ運用に持っていくのもありなのかなと思います。
なるほどなぁ。まあそんな感じよなぁ...onigiri.w2.icon
でもさ、以下のurl見ると、大体のことできそうよなwwonigiri.w2.icon
だから、あんま心配しなくていいかもonigiri.w2.icon
アプリ例
本番環境でのReactNativeの動作イメージ
参考
簡単なイメージだけ
モバイル上では以下のメンバーが躍動して動いてるっぽい(確実では無いが)
1. Javascript ランタイム
ユーザーが書いたJavascriptコードが動く
2. Javascriptとネイティブをつなぐやつ
「1.」と「3.」の動作を繋いでる
3. ネイティブ側のランタイム
実際にユーザーに見えるUIとか動作とかを司る。
最近は?以下の感じ?かも
https://scrapbox.io/files/647738fda34c14001b3bd3f6.png
まあいずれにせよ以下は正しいはず。
「ビルド時にJavascriptをネイティブ言語に変換してる」とかではない!!
Javascriptはモバイル上のJavascriptランタイム上で元気に動いてる。
ReactNativeの動作テストってどうやるん
なんか、Expoみたいに簡単にできるわけではなさそうです。。。onigiri.w2.icon
いや、簡単にできそうです。
$ npx react-native start
ネイティブモジュールをAPI形式でJSから使える!?
動作させてみる
参考URL
Input
hr.icon
なるほど、ReactNativeで用意されてるViewやTextって、裏で以下のようにつながってたのか。
table:
REACT ネイティブ UI コンポーネント アンドロイドビュー IOSビュー ウェブアナログ
<View> <ViewGroup> <UIView> 非スクロール<div>
<Text> <TextView> <UITextView> <p>
<Image> <ImageView> <UIImageView> <img>
<ScrollView> <ScrollView> <UIScrollView> <div>
<TextInput> <EditText> <UITextField> <input type="text">
ReactNativeで使えるライブラリたち