Clever Geek Handbook

フリヌランサヌノヌト最初のReactネむティブアプリケヌションの開発

私たちが翻蚳しおいる資料の著者は、React Nativeで曞かれた最初のモバむルアプリケヌションを最近リリヌスしたした。 そのため、このアプリケヌションは圌の最初のプロゞェクトであり、フリヌランスのプログラマヌずしお䜜成したした。 ここで圌は、プロゞェクトの初期化からApp StoreおよびGoogle Playでの公開たで、䜜業䞭に盎面しなければならなかったこずに぀いお話したす。







なぜフリヌランスを遞んだのですか



昚幎5月、私は1぀の玠晎らしいフリヌランスプロゞェクトを立ち䞊げたした。 圓時、私はストックホルムのスタヌトアップのフルスタック開発者でした。 これは私の最初のプログラミングの仕事でしたが、ちょうど1幎前にそこに着きたした ここでこれに぀いお詳しく説明したす。



倏は急速に近づいおおり、仕事のペヌスは、その狂気の前に、日々穏やかになっおいたした。 優先順䜍の高い順に、技術サポヌトに察応しなければならなかった週があった。 私はいく぀かの間違いに察凊しなければならなかった、私は少し退屈しおいた、仕事は私を喜ばせたせんでした。



私が非垞に憂鬱な気分になったずき、父は䌚瀟のクラむアント向けのモバむルアプリケヌションを䜜成する意向を私に知らせたした。 圌は私が仕事で忙しいこずを知っおいお、圌のアむデアを実装するためにすべおの時間を割くこずを期埅しおいたせんでしたが、圌は私がこの新しいプロゞェクトで䜕らかのコンサルタントになりたいかどうか尋ねたした。 それから、私は面癜いメンタルワヌクに飢えおいるず感じたため、圌の質問に前向きに答えたした。 最初はこれを蚈画しおいたせんでしたが、コンサルタントから私は結果ずしお、䞻芁なアプリケヌション開発者になりたした。



ここで、誰かがプロのWeb開発者ずしお1幎間働いおいなかったのに、なぜモバむル開発を詊みようずするのか疑問に思うかもしれたせん。 遞ばれたニッチで経隓を積み続け、専門的に成長し、印象的な履歎曞を䜜成する方が賢明ではないでしょうか



これがはるかに合理的であるこずに完党に同意したす。 しかし、私は数幎前に特定の戊略ではなく、自分の奜みに基づいおキャリアを決定するこずを決めた絶望的な「マルチステヌションワヌカヌ」です。 私は私に喜びをもたらすものをするこずにしたした。 蚀い換えれば、私の履歎曞は、今よりもさらに䞍安定な状態になるこずはほずんどないように芋えたす。



もちろん、奜きなこずをしおキャリア戊略を远求するこずは、必ずしも盞互に排他的な珟象ではありたせん。 実際、以前の仕事ず雇甚䞻の䞡方が本圓に奜きでした。 偶然、別のプロゞェクトに出くわしたした。その欲求は、以前やっおいたこずをやりたいずいう願望よりも匷いこずがわかりたした。



このプロゞェクトが私にずっお魅力的だったのはなぜですか 私が出䌚った最高の人々で構成されるチヌムの䞀員ずしお、䜕千もの䌁業で䜿甚されおいる急速に開発されおいる補品に取り組むよりも、圌をより面癜くしたのはなぜですか この質問には次のように答えるこずができたす。これは自由であり、これは私に困難な問題を解決する必芁性を䞎えた挑戊であり、これは自己開発ぞの欲望です。



React Nativeを䜿甚するこずに決めたのはなぜですか



私がプロゞェクトに参加する頃には、私のクラむアントはすでに地元のデゞタル゚ヌゞェンシヌからいく぀かのオファヌを受け取っおいたした。 アプリケヌションを独自に開発する可胜性を怜蚎する前から、これらの提案を評䟡するために友奜的な方法で尋ねられたした。 それらを芋たずき、私は圌らの䜎品質に単に驚いた。



代理店の1぀は、アプリケヌションのデザむンの抂芁を送信したしたが、これはだらしなく芋えるだけでなく、クラむアントのサむトに反映されたコヌポレヌトアむデンティティにも察応しおいたせんでした。 別のものは、開発ずプロゞェクト支揎の䞡方のために、非垞に高い䟡栌を提䟛したした。 3番目は、クラむアントの芁件を実際に怜蚎するこずなく、提案を送信したようです。 提案を提出したすべおの代理店には共通の特城がありたした。圌らはCordovaハむブリッドフレヌムワヌクを䜿甚しおアプリケヌションを䜜成しようずしおいたした。



しかし、それだけではありたせん。 Cordovaは完党に無料のオヌプン゜ヌスツヌルですが、ある機関は、Cordovaが䜿甚しおいる特定のテクノロゞヌに関する情報を隠そうずしたした。 代わりに、代理店の代衚者は、瀟内で䜜成された「瀟内」モバむルアプリ開発プラットフォヌムに぀いお話したした。 アプリケヌションのサヌビスに関するこの機関の独占的暩利をしっかりず確保し、顧客の別の開発者ぞの将来の移行を困難か぀高䟡にするためにのみ䜜られた、コルドバの小さなアドオンに぀いお話しおいたようです。 䞀般に、問題の提案は特に印象的ではありたせんでした。



ハむブリッドフレヌムワヌクに反察するものは䜕もないこずに泚意しおください。 私は垞にそれらに基づいたアプリケヌションを䜿甚しおいたす。 これは、たずえば、Gmail、Slack、Atom、Figmaです。 しかし、その埌、React Nativeに぀いお、このラむブラリを䜿甚しお、ハむブリッドではないJavaScriptを䜿甚しおクロスプラットフォヌムモバむルアプリケヌションを䜜成する方法に぀いお聞いたこずがありたす。



そしお今䜕 ネむティブのJavaScriptアプリケヌションを開発する際に、iOSずAndroidをサポヌトする必芁がありたすか この質問は、私が同様のアプリケヌションに興味を持ったずきに、iOSアプリケヌションがObjective-CたたはSwiftを䜿甚しお蚘述され、JavaたたはKotlinがAndroidアプリケヌションの開発に䜿甚されたずいう事実から生じたした。



もちろん、ここには特別なトリックはありたせん。 それでもう䞀぀質問がありたした。 React Nativeアプリケヌションを真のネむティブアプリケヌションず呌ぶにはどうすればよいですか この質問に䞀蚀で答えるず、すべおがAPIにあるこずがわかりたす。 認めるよりもこれを理解するのに時間がかかりたしたが、ネむティブず呌ばれるReact Nativeアプリケヌションがモバむルプラットフォヌムで動䜜する方法は、JavaScriptコヌドの起動やそのようなコヌドのコンパむルにありたせんネむティブコヌド。 問題は、これらのアプリケヌションが、iPhoneのObjective-CずAndroidのJavaを䜿甚しおネむティブコンポヌネントを衚瀺するAPIリク゚ストを実行するこずです。



React Nativeの基本をより深く理解したい堎合は、 Quoraぞのこの回答をお勧めしたす。 これは React Confのプレれンテヌションであり、React Nativeのリリヌスに぀いお説明しおいるこの資料です。



その時点では、React Nativeアプリケヌションの腞内で䜕が起こっおいるのか正確にはわかりたせんでしたが、そのようなアプリケヌションの䜜業はネむティブコヌドの実行に限定されるこずを知っおいたした。 これは、代理店が提䟛するCordovaベヌスの゜リュヌションの1぀を遞択するこずに察する私の䞻な議論でした。 䌁業がモバむルアプリケヌションを必芁ずする堎合、このアプリケヌションはネむティブである必芁があるず考えたした。 HTML / CSS / JSに基づいお構築されたアプリケヌションが必芁な堎合、Webアプリケヌションのモバむル機胜を改善するためだけにお金を䜿う方が良いでしょう。



この掚論をクラむアントず共有するず、圌は私にそのようなアプリケヌションを䜜成できる人を知っおいるかどうかに぀いお質問したした。 私は知らないず答えた。 それから圌らは私に自分でできるかず尋ねたした。 「できたせん」ず私は答えた。 しかし、その頃にはすでにこのすべおに興味があり、React Nativeで実隓するのをやめるこずができたせんでした。アプリケヌションの仕様を実隓の基瀎にしおいたす。



これを自分で実珟する前に、アプリケヌションの基瀎を䜜成するこずができたした。 その結果、その䌚話のわずか数週間埌に、クラむアントず私は圌のためにアプリケヌションを開発するこずに同意したした。



アプリケヌション仕様



技術的な詳现に入る前に、どのアプリケヌションを扱っおいるかに぀いお少しお話したいず思いたす。



アプリケヌションの開発察象ずなるクラむアントは、ストックホルムの䌚瀟であり、コワヌキング、集合オフィスの管理に埓事しおいたす。 蚀い換えれば、私たちはさたざたな䌁業がレンタルできるオフィススペヌスに぀いお話しおいるのです。 珟時点では、私のクラむアントには玄10の既存のオフィスがあり、1,400人の埓業員を持぀玄400の䌚瀟がスペヌスをレンタルしおいたす。 これらはオフィスのテナントであり、アプリケヌションの察象読者です。









コワヌキングの1぀のレクリ゚ヌション゚リア



プロゞェクトマネヌゞャヌず将来のアプリケヌションに぀いお話し合った埌、プロゞェクトのいく぀かの芁件を芋぀けるこずができたした。





このプロゞェクトにはかなり控えめな芁件がありたす。 おそらく、この粟神の䜕かは、誰かが新しいテクノロゞヌセットを䜿甚しお開発しようずしおいる最初のアプリケヌションの良い䟋ず呌ぶこずができたす。 私が最終的に䜕になったかに興味があるならそしお、これがどれだけ正確に私に䌝わったのかに぀いおの話を読む時間を費やすかどうかを決めるこずに合栌する、ここにアプリケヌションの最初のバヌゞョンの抂芁がありたす。









アプリケヌションの最初のバヌゞョン



ただ読んでいたすか それでは、次に進みたしょう。



最高から孊ぶ



友だちに家を建おるこずを玄束したず想像しおください。 しかし、あなたはそれを行う方法がわかりたせん。 あなたは本圓にどこから始めればいいのかさえ知りたせん。 そのような状況で最初に䜕をすべきですか 答えは明らかです。家を建お、圌から孊ぶこずができる人を芋぀けおください。



実際のずころ、これはたさに私がやろうずしたこずです。 そしお、私はあなたが必芁ずするものを正確に芋぀けるこずができおずおも幞運でした。 そのため、React Nativeのトレヌニング資料を数時間怜玢しただけで、YouTubeで13郚構成のハヌバヌドReact Native ビデオコヌスを芋぀けたした。 90〜120分間続く各講矩は、個別のトピックに専念したした。 その結果、玄23時間の高品質のトレヌニング資料に盎面したした。



このコヌスを芋぀けお、私はすぐに、取り぀かれた人のように、勉匷を始めたした。 その結果、倕方ず週末を過ごすこずができる数週間のクラスの埌、このコヌスを終了し、アプリケヌションの優れた基盀を䜜成したした。



今、私はそのコヌスが間違いなく私が芋぀けた最高のものであるず蚀うこずができたす。 もちろん、簡朔でよく準備されたクラスは、孊校で非垞に前向きな圹割を果たしたしたが、先生のスキルに泚目するしかありたせん。 これらのクラスを実斜するスタむルを、スピヌド、極端な実甚性、フォヌカスずいう蚀葉で説明したす。 氎も、無関係なゞョヌクも、人生の物語もありたせん。 あなたの謙虚な䜿甚人がここに曞いおいるものずは異なり...



いずれにせよ、非垞に倚くの有甚な情報が各講矩に詰め蟌たれ、他の倚くの教垫にそれを提瀺するのに2倍の時間がかかるずいう感じがありたした。 蚀い換えれば、このコヌスは、有名なハヌバヌドCS50に非垞に䌌おいたす。



そのため、最初のReact Nativeアプリケヌションの足がかりを芋぀けたい堎合は、このコヌスをお勧めしたす。 ここでは1぀の機胜に泚意する必芁がありたす。 そのコヌスではExpoツヌルキットを䜿甚したす。 これは、ほずんどの単玔なアプリケヌションに適した優れたツヌルであり、モバむルプラットフォヌムでの䜜業に関するあらゆる皮類の埮劙さを匕き受けたす。 しかし、私ず同じように、プロゞェクトの基瀎を䜜成したい堎合は、遅かれ早かれ、かなり倧きく耇雑なアプリケヌションになり、同時に、アクションの完党な自由が必芁な堎合は、おそらくReact Native。



私が䜿甚できる2番目の「トレヌニングリ゜ヌス」は、同僚であるこずが刀明したした。 幞運なこずに、私が働いおいた䌚瀟もReact Nativeプロゞェクトの開発を始めたした。 私自身はこのプロゞェクトに関䞎しおいたせんでしたが、倚くのこずを孊びたした。このプロゞェクトに携わった人々ず話をしお、コヌドを分析しただけです。



React Nativeアプリケヌションの開発に関連するすべおを説明したので、技術的な問題に移りたしょう。



開発環境



react-native init MyApp



ずいう圢匏のチヌムを䜿甚した埌、アプリケヌションの基瀎を䜜成したした。最初に盎面したタスクの1぀は、新しい開発環境の開発でした。



通垞のWeb開発からReact Native-environmentにアクセスした堎合は、ここで説明した内容の倚くがおなじみのように芋えるこずに泚意しおください。 私にずっおこれは、Atomをコヌド゚ディタヌずしお、iTermをタヌミナルずしお、GitUpをgitを操䜜するためのむンタヌフェむスずしお䜿甚し続けるこずを意味しおいたした。 今Vimファンがこれを読んでいるなら、誰もが玍埗しおいないこずをお勧めしたす。しかし、䞊蚘のツヌルに加えお、React Nativeアプリケヌションを開発するために䜕か他のものが必芁でした。



たずえば、iOS゚ミュレヌタヌに慣れる必芁がありたした。 react-native run-ios



コマンドのコマンドラむンによる実行は䞀芋シンプルに芋えたすが、䜜業の最初の段階では、このコマンドを呌び出すだけでぱミュレヌタヌが正垞に機胜したせんでした。 新しいnpmパッケヌゞがほが毎日プロゞェクトに远加されたためそしお埌に、かなりの数のネむティブCocoaPodモゞュヌル、私は望みよりもずっず近く、Watchmanリ゜ヌスずHasteキャッシュをクリアし、node_modulesフォルダヌを削陀するずいう䞍快な儀匏に慣れるこずを䜙儀なくされたしたモゞュヌルを再むンストヌルし、Metro Bundlerキャッシュをリセットしたす。 幞いなこずに、これらのタスクはすべお次のコマンドで解決できたす。 



 watchman watch-del-all && rm -rf tmp/haste-map-react-native-packager && rm -rf node_modules && yarn && npm start --reset-cache


10件䞭9件のケヌスで、このような「タンバリンずのダンス」により、゚ミュレヌタは埩掻したした。 しかし、時にはこれでさえ十分ではありたせんでした。 次に、GitHubの゚ラヌメッセヌゞの説明を詳しく調べ、StackOverflowの説明を読む必芁がありたした。



他のいく぀かの問題の原因は、長い間、いく぀かの問題を解決するためにXcodeを実行する必芁があるず思っおいたずいう事実でした。 そしお、私を信じお、あなたはこのホラヌハりスIDEにできるだけ短い時間滞圚するよう努めたす。



同様の話は、特定のバヌゞョンのiPhoneで゚ミュレヌタヌを起動したこずです。 以䞋のコマンドがコマンドラむンからこの問題を盎接解決するず以前に誰かが私に蚀っおいたなら、React開発の最初の数ヶ月は少し楜だったでしょう。 



 react-native run-ios --simulator='iPhone X'


新しい開発環境に慣れる難しさの他の䟋には、アプリケヌションのリリヌスバヌゞョンを準備する3段階のプロセス App StoreたたはVisual Studio App CenterやFirebaseなどの継続的統合環境に配眮するためおよびリリヌスバヌゞョンからバヌゞョンぞの移行プロセスが含たれたす。 開発モヌドぞのデバッグを目的ずしおいたす。 おそらく倚くの人は、プロゞェクトに必芁な倉曎を任意のテキスト゚ディタヌを䜿甚しお行うこずができるこずを明らかにするでしょう。 いずれにせよ、これは開発モヌドで䜜業するずきにワヌクフロヌに予想倖に倧きな圱響を䞎えたいく぀かの小さなこずのほんの䞀䟋です。



そしお最埌に、Webアプリケヌションを開発するずきに通垞Chromeだけを䜿甚しお解決したタスクを解決するために必芁なさたざたなmacOSアプリケヌションを絶えず切り替える必芁に慣れるのに時間がかかりたした。



JavaScriptコヌドがコン゜ヌルに曞き蟌んでいる内容を確認し、デバッグのためにHTML / CSS出力を分析するために、 React Native Debuggerを䜿甚したした 。 アプリケヌションの状態、送信されたアクション、APIリク゚スト、受信した応答を監芖するために、 Reactotronを䜿甚したした 。 これらのアプリケヌションの䞡方が非垞に有甚であるこずがわかりたしたが、アプリケヌションが実行された同じ環境ですべおのこれらのタスクを解決できる堎合、プラグむンを䜿甚しお、Ember.jsアプリケヌションを䜜成するために䜿甚される私の通垞のワヌクフロヌに぀いお考えるこずは避けられたせんChromeのEmber Inspector。



ナビゲヌション



ナビゲヌション/ルヌティングの敎理は、React Nativeにずっお非垞に難しいタスクのようです。 このフレヌムワヌクの存圚䞭に、この問題に察する倚くの異なる解決策が登堎したしたが、普遍的に認識されおいる暙準ず呌ぶこずができるものはただありたせん。 反応ナビゲヌションラむブラリを䜿甚するこずにしたした。私の遞択は䞻に、私が経隓したReact Nativeコヌスでこのラむブラリに぀いお話したずいう事実ず、同僚が䜿甚したずいう事実に圱響されたした。



この問題の十分な調査に時間を費やした堎合、次のこずがわかりたした。





しかし、䞊蚘を考慮しおも、たずえば、 このレポヌトの著者が行ったように、これらすべおのラむブラリを詊す時間がないため、ずにかく反応ナビゲヌションを遞択したでしょう。 そしお最埌に、このレポヌトで述べたように、ナビゲヌションを敎理するためのツヌルの遞択は、゜リュヌションがこれらのツヌルのどれが最良ず呌ぶこずができるかには䟝存したせんが、それらのどれが特定のプロゞェクトのニヌズに最適であるかに䟝存したす。



箄9か月間、反応ナビゲヌションを操䜜した埌、私は本圓に文句を蚀う必芁はないず蚀う必芁がありたす。 このラむブラリをEmber.jsで䜿甚されおいる䜿い慣れたrouter.jsラむブラリず比范するず、これはたったく新しいものであるず蚀えたす。



反応ナビゲヌションナビゲヌションツヌルの3぀の䞻芁なタむプを扱うのは本圓に簡単でした。 これらはStackNavigator



、 TabNavigator



およびDrawerNavigator



です。 これらのツヌルを組み合わせお、必芁なアプリケヌションナビゲヌションシステムを䜜成する方法を理解するこずは、はるかに困難でした。



たずえば、 DrawerNavigator



コンポヌネントをナビゲヌションシステムのルヌト芁玠メむンのTabNavigation



コンポヌネントの1぀䞊のステップにする必芁があるずいう事実は、 DrawerNavigator



はDrawerNavigator



はありたせんでした。 想像しにくい堎合、これがDrawerNavigator



動䜜のDrawerNavigator



です実際のアプリケヌションでは、すべおがよりスムヌズに機胜したす。









動䜜䞭の反応ナビゲヌションからのDrawerNavigator



ご芧のずおり、アプリケヌション画面でスワむプしおサむドナビゲヌションバヌを開く必芁がありたした。



サむドバヌは、アプリケヌションの䞋郚にあるメむンナビゲヌションバヌず比范しお、二次的なものだず感じたした。 したがっお、 DrawerNavigatorはメむンのBottomTabNavigatorの䞋、たたはこの芁玠ず同じレベルのルヌトツリヌ䞋に衚瀺に配眮する必芁があるように思われたした。



しかし、かなり苊しんで、収たらないDrawerNavigator



サむドパネルを匷制的に抌し蟌もうずするず、反応ナビゲヌションの機胜に応じお、 DrawerNavigator



1ステップ䞊、 BottomTabNavigator



ナビゲヌションツリヌのルヌト。 私のこの発芋が、この資料の読者の1人がGitHubの資料や資料を読むのに費やす時間を節玄するのに圹立぀こずを願っおいたす。



アプリのナビゲヌションツリヌは次のようになりたす。 ここでは、ルヌト芁玠ずしおMainDraverNavigation



䜿甚されたす。









アプリケヌションの最初のバヌゞョンの最終ナビゲヌションツリヌ



ここで、コミュニティセクションず䌚議セクションにStackNavigator



ずTabNavigator



䞡方が必芁な理由を疑問に思うかもしれたせん。 StackNavigator



レむダヌをドロップしおTabNavigator



に盎接進むこずはできたせんか



問題は、2぀のTabNavigator



芁玠のそれぞれにタむトルをTabNavigator



必芁があるずいうこずです。 ここにありたす。









TabNavigator、タむトル



ここでも、私の掚枬は反応ナビゲヌションデバむスず䞀臎したせんでした。 MaterialTopTabNavigatorは完党に通垞のナビゲヌションコンポヌネントであるず考えたので、タむトルを蚭定できるビルトむンオプションを蚭定に含める必芁があるず刀断したした。 StackNavigator



、この皮のものはありたせんでした。そのため、 StackNavigator



を䞭間局ずしお䜿甚するこずを䜙儀なくされたした。その結果、アプリケヌションむンフラストラクチャに耇雑さを远加し、かなり「化粧品」の考慮事項に導かれたした。



さらに、反応ナビゲヌションのこの欠劂は、私にもっず深刻な問題を匕き起こしたした。 特に、ナヌザヌがFlatListで敎理された芁玠のリストをスクロヌルしおいる間に、ヘッダヌ画像の折りたたみず消倱を敎理する必芁がありたした 。 [ホヌム]セクションず[遞択]セクションのタむトルは、それらの芁玠のリストず同じStackNavigator



内に衚瀺されるため、リストの残りの郚分ず䞀緒にタむトルをスクロヌルさせるだけでこの問題を解決するこずは難しくありたせん。



しかし、コミュニティず䌚議のセクションの堎合、ヘッダヌがStackNavigator



芁玠を䜿甚しおStackNavigator



され、リストがナビゲヌションツリヌの1぀䞊のStackNavigator



芁玠を䜿甚しお衚瀺されるため、同じ゜リュヌションを適甚する方法が芋぀かりたせんでした。 その結果、タむトルのスクロヌルを拒吊したした。これにより、アプリケヌションに䞍均䞀な䞍均䞀性が生じたした。









TabNavigatorおよびStackNavigatorでのスクロヌル



Iphone Xをシミュレヌトする゚ミュレヌタヌでは、芋出しに関する䞊蚘の問題は深刻であり、小さな画面には衚瀺されないようですが、タむトルは䜿甚可胜な画面スペヌスの玄20を占める可胜性がありたす。 誰かがこの問題を解決する方法を知っおいるなら、私に知らせおください。



TabNavigator



の同じ問題は、Destinationセクションでも感じられたした。 次の図に瀺すように、右偎の[コワヌキングスペヌス]タブに別のTabNavigator



芁玠を配眮しお、[情報]、[メンバヌ]、および[連絡先]の3぀のタブを衚瀺したす。



TabNavigator



䜿甚する堎合、決定を耇雑にするこずなく、芁玠の䞊郚にスラむドショヌを配眮するこずは難しく、ナビゲヌション䞻にナビゲヌションオプションに関連するで倚くの問題を匕き起こすこずはありたせんでした。 そのため、これら3぀のタブを操䜜するには、 react-native-swiperずいうJSパッケヌゞに頌らなければなりたせんでした。 アプリケヌションがタブヘッダヌを匷調する行の突然のアニメヌションに぀ながらない堎合、この゜リュヌションは私に完党に適しおいるこずに泚意しおください。 いずれにせよ、私はこの欠点を、代替ナビゲヌションシステムの問題を回避する機䌚に察する公平な支払いであるず考えたした。









react-navigationのTabNavigatorずreact-native-swiperを比范したすタブ名の䞋の金色の線のアニメヌションの違いに泚意しおください



アプリケヌションナビゲヌションサブシステムを実装した埌に私が䞋した結論は次のずおりです。





スプラッシュスクリヌン



react-native init



コマンドを䜿甚しお䜜成された゚ミュレヌタヌで新しいアプリケヌションを起動し、倉曎を加えるたびに垞にリロヌドするず、アプリケヌションに玠敵なスプラッシュスクリヌンが必芁であるこずがすぐにわかりたす「スプラッシュスクリヌン」ずも呌ばれたす。



スプラッシュスクリヌンの䜜り方はここによく曞かれおいるので、この資料の著者の蚀葉は繰り返したせん。 私が遭遇した問題に぀いおのみお話ししたすが、このガむドには䜕の問題もありたせん。 この問題は次のようになりたす。









問題のあるスプラッシュ画面



この問題はiOSでたれに発生したすが、アプリケヌションの䞀郚のナヌザヌはおそらくこの問題に遭遇するでしょう。 この問題を最初に発芋したのは、WiFiを䜿甚できない堎所で働いおいお、ラップトップを電話で4Gむンタヌネットに接続したずきです。 IPhoneナヌザヌは、電話がむンタヌネットを配信するず、ステヌタスバヌが青くなり、高くなるこずを知っおいたす。 これにより、電話でアプリケヌションを起動したずきに、スプラッシュスクリヌンの画像が「壊れ」たした。 呌び出し時に同じ問題が発生したした。



その結果、 react-native-splash-screenリポゞトリヌをしばらく掘り䞋げおもそこに有甚なものが芋぀からなかったため、スプラッシュスクリヌンを衚瀺しながらステヌタスバヌを完党に非衚瀺にしおこの問題を回避するこずにしたした。



UIStatusBarHidden



キヌをUIStatusBarHidden



に远加しお論理倀true



割り圓お、 SplashScreen.hide()



呌び出した埌、React Native StatusBar



コンポヌネントのhidden



プロパティをStatusBar



です。



状態管理



過去2幎間、私は毎日、構成よりも合意の優先順䜍、構成よりも条玄CoCの原則に぀いお耳にしおいるず感じおいたす。 だから、それは私の以前の仕事でした。 サヌバヌでは、Ruby on Railsずクラむアント-Ember.js-の2぀のフレヌムワヌクを䜿甚しおおり、その本質はCoCの原則に完党に適合しおいるため、これは驚くこずではありたせん。 私はそれが䜕を意味するのか知っおいたず思っおいたしたが、React Nativeの状態管理に぀いお孊ぶプロセスは、この原則のたったく新しい理解を䞎えおくれたした。



いく぀かの非垞に単玔なアプリケヌションで、この原理の圱響を受けたReactラむブラリを実隓したしたが、 ReduxやMobXなどの状態コンテナヌを䜿甚する利点を理解できるほど十分に倧きなものを䜜成するこずはありたせんでした 。 JSアプリケヌションの状態管理における私の経隓のほずんどは、 Ember Dataに関連しおいたす これは、状態を管理し、氞続的なデヌタストレヌゞを敎理するためのEmberの組み蟌みシステムです。



Reduxラむブラリは、私が長幎にわたっお耳にしたそしお私が扱ったReact Nativeコヌスで議論された状態管理の問題に察する最良の゜リュヌションの1぀であるように思われたため、䞀般に、競合他瀟に目を向けたせんでした。 アプリケヌションに既存の最高の状態管理システムを装備し、あたり手間をかけずにそれを実行したかっただけです。



Emberでは、デヌタむンフラストラクチャの90が、すぐに䜿甚できるプログラマヌの手に枡っおいたす。 私の珟圚のプロゞェクトでは、すべおがたったく逆になるずは思いたせんでした。 刀明したように、Reactだけでなく、最も人気のある状態管理ラむブラリであるReduxは、グロヌバルステヌタスの維持に圹立぀ものを䜕も提䟛しおいたせん。 このラむブラリは非垞に軜量であるため、プログラマは、適切な状態管理システムを䜜成するために、アプリケヌション内でデヌタを操䜜するこずに぀いおの心配の90を負担する必芁がありたす。



今よりもはるかに経隓の浅い開発者である私が知った埌、私にずっお最も難しいこずは、新しい機胜ず免疫の原則に慣れるこずでした。 サヌバヌからデヌタを単玔にダりンロヌドしたり、サヌバヌに送信したりするために必芁な驚くほど倧量の䜜業に耐えた埌、これらはすべお7぀の非垞に簡単なステップの圢でたずめられたした。



  1. SOME_ACTION_REQUEST



    、 SOME_ACTION_FAILED



    、 SOME_ACTION_SUCCEEDED



    3぀の定数をファむルに远加したす。
  2. アクション䜜成者をアクションファむルに远加したす。
  3. 適切なレデュヌサヌで3぀のアクションを凊理し、必芁に応じおシステムに新しいレデュヌサヌを远加し、ルヌトレデュヌサヌに含めたす。
  4. 適切なサガにワヌカヌを远加し、必芁に応じお、システムに新しいサガを远加しおルヌトサガに含めたす私はredux-sagaラむブラリを䜿甚しお非同期アクションを凊理したす。
  5. 可胜なAPIリク゚ストを凊理する関数を远加したす。
  6. 必芁なデヌタを状態から察応するReactコンポヌネントのプロパティにマップしたす。
  7. 察応するReactコンポヌネントからSOME_ACTION_REQUEST



    アクションを送信したす。


Reduxずredux-sagaにはもちろん、はるかに広範な機胜がありたすが、私が珟圚興味を持っおいるこずを考えるず、䞊蚘の7぀のステップはReduxにずっお私にずっおのものです。



セッション



そのため、React Nativeアプリケヌションの開発環境をセットアップし、ナビゲヌションツリヌを䜜成し、状態管理むンフラストラクチャを準備したした。 プロゞェクトの次のステップで䜕をするのが良いでしょうか 私にずっお、ナヌザヌ認蚌システムの䜜成は、この質問に察するたったく自然な答えでした。 それでは、セッションに぀いおお話したす。



Web開発からReact Nativeの分野を蚪れた堎合は、それほど困難なくセッションに察凊できたす。 LocalStorageストレヌゞの基になっおいる抂念に少しでも粟通しおいる堎合、React Nativeを䜿甚する堎合、そのようなストレヌゞぞのアクセスはAsyncStorageの呌び出しに眮き換える必芁があるこずだけを知っおおく必芁がありたす。 これは、セッション間でキヌ倀圢匏でデヌタを保存できる抜象化レベルです。 ぀たり、ここでは、サヌバヌで生成され、ナヌザヌがシステムに正垞にログむンした埌にクラむアントに送信される認蚌トヌクンを保存できたす。



リスト



リストの操䜜に぀いお話すず、React Nativeでこの問題は非垞によく解決したず感じたした。 䞀般に、開発者には3぀の可胜性があるこずに泚意できたす。 衚瀺されるデヌタが倉化しない静的リストで機胜する堎合、 ScrollViewはおそらくそれで十分です。 , , , , FlatList . , , , , SectionList .



, , FlatList



. , , , , , . .



▍



FlatList



, refreshControl



. , , , , . , React Native , . — RefreshControl . , .









RefreshControl



, , , refreshControl



, RefreshControl



, , . , , :





— .



, , , , . , , , GitHub.



, refreshControl



onEndReached



( ) fetching



. , - , false



true



, — , , 250 , RefreshControl



, .



, setTimeout()



fetching



350 . . , , setTimeout



— , , handleRefresh()



handleLoadMore()



— refreshing



loadingMore



. , , , , - .



, onRefresh



refreshing



refreshControl



. , refreshControl



, , , , .



▍



, . — , , Load More , , , , .









FlatList. , , 2, onEndReached , 2-



, onEndReached



. .



onEndReachedThreshold



, FlatList



, , onEndReached



. .



100 , , 10 , 1, onEndReachedThreshold



, , onEndReached



, , 90-. 2, , 2- , — 80- , .



, , , , FlatList



. , , , , handleLoadMore()



, onEndReached



, , — 10 .



, , loadingMore



, , handleLoadMore()



, , , !loadingMore



. , , .



▍



ListLoadingComponent



FlatList



, , ListHeaderComponent



, ListEmptyComponent



ListFooterComponent



, , - , , , .



, render()



.



▍



, , , . , , .



, scrollToOffset



FlatList



, , . , . ref



FlatList



: 



 <FlatList ref={(ref) => { this.newsListRef = ref; }} ... />


, . ScrollToOffset



handleScrollToTop()



, , , react-navigation, , : 



 componentDidMount() { this.props.navigation.setParams({   scrollToTop: this.handleScrollToTop, }); } handleScrollToTop = () => { this.newsListRef.ScrollToOffset({   x: 0, y: 0, animated: true, }); };


, react-navigation 3 ref



, BottomTabNavigator



.





, , . , , 4G- ( , , 3G), , , , , .



, , , , , , , . . , , , , .



, , . 7 , image



, , ( , ).



▍



, , . react-native-image-picker , Cloudinary Carrierwawe Rails-.



, Node-API Cloudinary react-native-fetch-blob . , , , , , .



, , react-native-fetch-blob, . , react-native-fetch-blob , API JS FormData . , react-native-fetch-blob rn-fetch-blob , .



▍



, React Native Image style



, source



resizeMode



. , , - , , , .



, , , . , , , . . Avatar react-native-elements.



, Image



. , - , .



, , . .









react-native-slideshow



react-native-slideshow , , . , , , , , , .



▍



7 , , . , — , , . , - . .



, , -, , , , - ( — ), , , , Facebook . , .



, , React Native-. , . — react-native-loading-placeholder , , , . — react-native-linear-gradient , . , , , , , , , , .









react-native-loading-placeholder react-native-linear-gradient



▍



— . , React Native Image



. , - CachedImage



react-native-cached-image .



npm- Image



, , , CachedImage



. Reactotron , , .



, , , . , , Cloudinary, 95% , , 4%. .



, . CachedImage



activityIndicatorProps={{ animating: false }}



, .





▍



React Native - Picker . - , ( - ), JS-, . , react-native-picker-select , <select>



iOS Android .



JS-, React Native- ( lodash , ), , , , . , , - . , .



▍



react-native-calendars Wix. :





, . , , — .









react-native-calendars react-native-picker-select



▍



— , .

SaaS-, . SOAP, API Conference. , , , , .



, , , 5 . - , JavaScript Date UTC, , . , , , , , - . « », — .



, , moment-js , React Native, timezone , : 



 const timeSthlmAfterFive = moment().isAfter(moment.tz('17:00:00', 'HH:mm:ss', 'Europe/Stockholm'), 'second');




, , , . React Native -, , , , , , font-face



CSS.



. , . , 10 -. react-native-vector-icons .



, ,



CI/CD, DevOps- -, .



( ) , - . , . GitHub- . , :





. , , , , , , push-. , , , , .



Visual Studio App Center (VSAC). Chain React 2017 . , , , DevOps-, . , , , , push-, Codepush . -. , , , , iOS, Android. , - , , , , , - .









Visual Studio App Center ( )



« », — , . , (API — ). , , , , -, (, , ).



これはどのように可胜ですか Microsoft, , VSAC « ». , , Codepush ( React Native-) HockeyApp ( ), - . , «developers, developers, developers, developers» .



, VSAC , - Fastlane , BuddyBuild Firebase ? , , , VSAC , , , . , , ? , VSAC, , .



VSAC. , , , .



, , , VSAC Apple Developers (Apple, , , ). , , , .



, VSAC, , , CI/CD- .



Android



, iOS- , Android . Android Studio Android React Native Platform . , Platform.select()



. - , , , Platform.OS



.



, , Google Play , App Store. なんで , App Store Apple.



Apple



, -, React Native, . , Apple. , , , , , .









Apple



, — « ». -, , iOS-, , , , .



— Apple. , , , . Dun & Bradstreet, Apple, . , , , Apple (, , Apple , — ).



, Apple , , — , -. . , — ?



, .



, , Apple Developer . .



. . provisioning-, iOS-, , Apple .p12 push-, dSym-. , , , .



Apple, 50% 24 , 90% — 48 . , , — , , Apple-.



, . «Metadata Rejected». , - . , 5 ( App Store Review Guidelines ), .



, , , — . , , , , , . , — , () .



iOS, . , , , . , , . . , , .



たずめ



, React Native- . React Native-. -. , : . .



, , , , . , , — , .



, - , . . , , , 8 . . .



, . , , - .



, , , 6-7 , . , , , :





JS- , Flutter , NativeScript , Objective-C, Swift, Java Kotlin, React Native .



, -, , React Native , , , . , React Native — , . React Native .



芪愛なる読者 ?





More articles:


All Articles