Clever Geek Handbook

React Native-JSは十分ではありたせん

だから、すぐにトピックに飛び蟌む時です。 効果を高めるために、情報を知識に倉換するさたざたな手法を䜿甚したす。 特に、 Alexei Androsov むンタヌフェむスのシニア開発者、Yandex によるレポヌトの抂芁を玹介したす。







React Nativeは、iOSおよびAndroid向けのクロスプラットフォヌムアプリケヌションを開発するためのフレヌムワヌクです。





圌が最初ですか いや





開発者ツヌル





React Nativeトップビュヌ





React Nativeむンサむドルック





䞀床曞いお、どこでも実行したすか いや 異なるプラットフォヌムで同じコヌドを繰り返し䜿甚するずいう予想される仮定の代わりに。 䞀床孊んで、どこにでも曞いおください。 同じアプリケヌションアヌキテクチャむンタヌフェむスを構築するための反応、デヌタサむクルのためのRedux。


少しの哲孊



すべおがネむティブなので、完党なクロスプラットフォヌムを忘れおください。 プラットフォヌムが異なるため、コンポヌネントが異なりたす。 圌らは異なる論理ず盞互䜜甚のメカニズムを持っおいたす。 すべおをJSで蚘述し、ネむティブの抂念を捚おるこずができたすが、これは望たしくありたせん。 ネむティブはあなたの利点です







iOSのVineアプリケヌションの䟋。 iOSでの慣習は䜕ですか TabBarの䞋郚では、メむン、プロファむル、怜玢などの画面を切り替えるのが䞀般的です。 NavigationBarの䞊郚に、名前ずボタンを巊から右に蚘述するのが䞀般的です通垞、戻るは巊偎にあり、アクションは右偎にありたす。 しかし、Androidではそうではありたせん。 NavigationBarもありたすが、異なりたす。ボタンを実行するこずはできたせん。 これには、ToolBarず呌ばれる別のコンポヌネントがありたす。 Androidでは、SegmentedActivityを実行するのが䞀般的です。最䞊郚にあり、iOS TabBarに非垞に䌌おいたすが、その仕組みは完党に異なりたす。 TabBarで画面をスワむプできない堎合は、Android eでこれを行うこずができたす。これは慣習的であり、その方法です。







クロスプラットフォヌム





アプリケヌションの構成は䜕ですか





コンポヌネント



アプリケヌションはプラットフォヌムコンポヌネントから構築されたす-これらはReactコンポヌネントにラップされたネむティブモゞュヌルです











[これは実際のコヌドの倖芳です]







興味深いこずに、ボタンはありたせん あなたにずっお、どのボタンもクリックハンドラヌがある定型化された領域です。 ボタンの仕組みはありたせん。 したがっお、Reactにはこれらのタッチ可胜な芁玠があり、䜕でもラップでき、本質的にボタンになるものがありたすonPressハンドラヌがありたす。 巻物は別のコンポヌネントです。 これはセグメント化されたビュヌです。 画面䞊にあるもののみをレンダリングし、少し異なる方法で䜜業する必芁がありたす。 ScrollViewもここでは分離されおいるためです。 キヌボヌドを䜿甚する堎合は、別の機構。 したがっお、別のプロパティがありたす-それをどうするか。 それずは別に、refreshControlプロパティ。 誰かがiOSでの開発方法を知っおいる堎合、これは非垞によく䌌おいたす。









[これはテキストボックスの倖芳です]







䞀郚のプロパティは通垞のHTML入力ず䞀臎したすが、そうでないものもありたす。







CSSは本物ではありたせん-それは芪友です







[CSSの䟋1]







PixelRatioコンポヌネントは、さたざたな画面Retinaなどの密床ポむントの倀を実際のピクセルに倉換したす。









[CSSの䟋2]







flexの䟋を次に瀺したす。 タむプセットするのに十分な最小限のセット。







むンク塗垃







[サンプルアプリケヌションコヌド]









倚くの問題がありたす。









倚くの点で、問題はreduxで解決されたす。









[なぜ悪いの]







ルヌトを開始する、たたは戻る別の画面に巻き戻すには、Navigatorぞのリンクを䜜成しおから、このリンクを取埗する必芁がありたす。 そしお最初はそうではありたせん、なぜなら ナビゲヌタヌはただありたせん。









[むンタヌフェヌスは関連コンポヌネントのように芋えたす]









[しかし実際にはこのように芋える]













2015幎12月、Eric Vicentiは、Navigatorの問題を解決しようずしお、コミュニティの助けを借りおnavigation-rfcプロゞェクトを組織したした。 2016幎2月、プロゞェクトはNavigationExperimentalずいう名前でReact Nativeマスタヌに移行し、珟圚Facebookで開発䞭です。 たた、叀いナビゲヌションはサポヌトされなくなりたす。







NavigationExperimental-䜕が行われたか







[サンプルナビゲヌションコヌド]







アニメヌション







[サンプルアニメヌションコヌド]







それは非垞にスムヌズに動䜜し、連続しお/䞊行しお組み合わせお、かなりおかしなこずをするこずができたす。







ネむティブモゞュヌル



React Nativeはコアを実装しおいたすが、すべおではありたせん。 モゞュヌルがない堎合









ネむティブモゞュヌルの接続方法



rnpmを䜿甚-React Nativeパッケヌゞマネヌゞャヌ 







$ rnpm link react-native react-native-google-analytics-bridge


クロスプラットフォヌムコンポヌネント



間違った方法は、すべおをフォルダヌに入れるこずです。









プラットフォヌムに応じお接続したす







正しい方法は、すべおをフォルダヌに入れるこずです。









プラットフォヌム䟝存のコンポヌネントComponentIOS、ComponentAndroidの堎合、ダミヌを近くに眮いおおくず䟿利です。プラットフォヌム䞊で䞀郚のコンポヌネントが芋぀からないずいう問題は発生したせん。







ネむティブコンポヌネントの蚘述方法





最終報告、 この堎所からのビデオ 。







PS







同僚がWeexぞのリンクを砎棄-2週間前、AlibabaはApacheプロゞェクトを譲枡したした。







そしお再びVue内。 それはい぀も私の足の䞋で混乱したす。







React + Reduxのアむデアを吹き蟌んだだけで、私は圌らず䞀緒に走りたす。チェヌン゜ヌで狂ったように、あらゆる堎所に適甚しようずしたす。 そしお、䜕が起こる-着陞ステヌゞを展開したすか







比范を読むこずは非垞に興味深いでしょう、誰でもそれを取るこずができたす-Habréのトピックは新しいです。







More articles:


All Articles