Android開発Belfryパート2のネイティブReact

数日後、AndroidとiOSのネイティブ開発のみを経験する前に、一般的にリアクションネイティブを選択し始めた後、最後の記事を書きました。 この時間の後、私はすでに本物の反応ネイティブプロジェクトに取り組むことができました。 そして今、私は実際のプロジェクトで働いているときに出会ったすべての明白な瞬間と非自明な瞬間を強調したいと思います。 猫の下で興味がある人。

ツール

もう一度、作業ツールのトピックを強調します。 React Nativeはバージョン1.0にまだそれほど近づいておらず、少なくとも1.0です。これが、この製品用の完全に機能する、洗練されたIDEが不足している理由です。 とはいえ、突然、 デコIDEに出会いました。 はい、これは本当のIDE（明らかな理由でmacOS専用）であり、airbnbも購入しました。 しかし、すべてがバラ色であることが判明したわけではありません。 はい、ここでは、コンポーネントをコードにドラッグアンドドロップするだけで、「マウスでプログラム」できます。 繰り返しますが、コンポーネントのリストがあり、毎回オフィスに行く必要はありません。 どのコンポーネントがまだ存在するかを調べるためのWebサイト。 プロジェクトを文字通り1ポークで開始することもできます（iOSのみですが、Androidには常に問題があります）。 しかし、それはすべてのチップが終わるところです。 固定されたcmdでクリックすることによるコンポーネントへの迅速な移行はありません。適切なリンターと自動補完さえありません。 コーディング機能に関しては、これは閉じられていないタグのみが強調表示できるシンプルなメモ帳です。 しかし、今では大企業がこのツールで忙しいので、その早期開発を期待しています。



反応ネイティブに関するほとんどのビデオと、さまざまな記事のスクリーンショットでは、 VSコードがいたるところに見られました。 事は本当に良いです、eslinterはプラグインとして簡単に接続できます、あなたはフローを拾うことができます、autocomplitsとコンポーネントへの移行さえあります。 組み込みのgitと統合されたターミナルさえあります。 また、私はそれを使用しますが、私にとっては大きなマイナスがあります-デフォルトでは、開いているファイルはそれぞれ前のファイルを置き換えるかのように1つのタブで開きます。 異なるファイルで2つのタブを開くには、ファイルの編集を開始してから、2番目のタブで既に開いている別のタブを開く必要があります。 2〜3種類のファイルをすばやく表示する必要がある場合は、椅子の室内装飾品を変更する必要があります。これにより、不快感が生じます。



したがって、私はまだNuclideに落ち着きましたが 、 flowをピックアップすると、オートコンプリートが大幅に向上し、クリックによるコンポーネントへの迅速な移行に加えて、すべてのチップにタイピングが追加されます。 これまでのところ、1回のクリックで美しく便利なプロジェクトの起動を忘れる必要があります。

カメラ、地図、その他の複雑なものを扱う

これはおそらく誰にとっても最も興味深い質問です。 悪いニュースは、カメラとカードのデフォルトコンポーネントがないことです。 ネイティブコードを使用する必要があります。 良いニュースは、すべてが私たちの前にすでに行われていることです：

• airbnbによって作成された非常にクールなマップ 。 私は個人的に使用しましたが、すべてがiOSとAndroidの両方でうまく機能し、非常にうまくカスタマイズされています。
• カメラもすでにあります。 私は個人的には試していませんが、興味はありますが、必要はありませんでした。
• ジオポジショニングでは、良い、彼は箱から出してすることができます。

一般的に、すでに多くの機能するコンポーネントがありますが、グーグルで検索する必要があります。 しかし、あなたは自分で書くことができます。

作業プロセス

React Nativeの問題は1つだけです。AndroidのAndroidの問題です。 これがシステムにとって問題なのか、Androidにボルトを取り付けた開発者にとって問題なのかはわかりませんが、それには常に奇妙な妨害があります。

最も奇妙なケース：フォーマット文字列に変換された日付：「YYYY-MM-DD HH：mm：ss」は、iOSとAndroidで文字の長さが異なります。どのプラットフォームで余分なスペースがありますか？ 激しいペアにつながるだけで、コードは純粋なjs上にあるように見えます。iOSではすべてが正常に動作しますが、Androidでは何かがうまくいかない可能性があります。 したがって、コードを変更した後は常に両方のプラットフォームでアプリケーションをテストする必要があり、これがどのような問題につながるかはわかりません。



実際、私にとっては、何らかの理由でDateがAndroid上で曲がって動作するのと同様の問題はまれでしたが、momentJSは問題ありません。 すぐに後者を使用してください。 しかし、異なる性質の組版の問題があります。

第一に、アンドロイドは、スタイルに示されているシェーディング方法をまったく知りません。 それには別のパラメータがあります-'elevation'ですが、それだけです。 影の色、半径、透明度-これらはすべてアンドロイドを通過します。

第二に、画面解像度。 アップルフォンは、特にプラスで巨大な解像度を持っているため、必要なフォントサイズのボタンを公開すると問題が発生します.iOSではすべてがうまく見えますが、Androidではすべてが固着します-画面は小さくなります。 幸いなことに、react nativeを使用すると、アプリケーションが起動されたプラットフォームを特定できます。これにより、コード内の何か（スタイルなど）が変更されます。



開発プロセス自体に関しては、Androidのネイティブ開発後に得られる自由感を説明するのは困難です。 Android SDKは、特定の何かのために設計されたツールを提供しますが、それは避けられません。 ここでは、クラスがレイアウトにフックされるアクティビティがあり、少なくともあなたがしていること、そしてアクティビティがあるべきだと考えられました。Google自身でさえ、それについて何もできません。 そのため、彼らはデータバインディングを提供し、このライブラリを使用して、ケースの99％のアクティビティは松葉杖として使用され、レイアウトとViewModelを取得し、途中でModelを渡しますが、レイアウトで既にモデルとViewModelを明示的に指定しました。 この場合、ロジックはまったくありませんが、アクティビティがあります。 情報を送信するには、Intentが必要であり、単純なタイプのみを問題なく送信できます。オブジェクトを渡したい場合は、すべてParcelableを送信します。

そして、そのような例はたくさんあります。 ネイティブのリアクションの場合、... JavaScriptのみがあり、それだけです。 この要素またはその要素の作成方法を決定します。 そのため、ナビゲーションに最大3つの異なるライブラリを使用できます。

• 一
• 第二
• 第三

とにかく、どんなタスクでも好きなように解決できます（まあ、ほぼ）。 そして、これは試薬の中で最も興味深いです。

コンポーネント

特記事項は、コンポーネントに値します。 Webのユーザーにとっては、これは使い慣れたツールですが、携帯電話のユーザーにとっては、これは単なる特効薬です。



ここには3つの異なるボタンがあります。 実際には違いはありません。これは1つのコンポーネントです。 コンポーネントの急峻性の規模を理解していますか？ ここで「完全に」という言葉から、レイアウトのコピーアンドペーストを忘れることができます。 はい、アンドロイドには理論的にコピーアンドペーストから私たちを救うべきスタイルがあります。 しかし、それらは純粋なコンポーネントに適用されます。 はい、ボタンのスタイルを設定できますが、上の写真のようにボタンを作成するには、Androidの1つのボタンでは不十分です。 これは、TextViewとImageViewの両方が存在する完全に独立したレイアウトであり、これらすべてとレイアウトには独自のスタイルパラメーターがあります。 また、3つのボタンはすべて、これらのコンポーネントの数が異なります。写真がない場所、2つのテキストなどです。つまり、Androidでこれらの3つのボタンすべてを3回完了せずに作成することはできません。 さて、反応でこれをどのように行うことができますか？ ここには3つの魔法があります。

1. 小道具
2. 存在する要素のみを表示する
3. スタイルオーバーレイ

すべての詳細をご覧ください。

Androidでは、最初にレイアウトでコンポーネントを作成し、次にアクティビティでID'shnikによってコンポーネントを見つけ、いくつかのパラメーターを渡します。たとえば、テキストを変更します。 これは、表示するものが事前にわかっている場合に機能します。 試薬では、必要なパラメーターを使用して作成する必要があるコンポーネントを示します。 塩とは何ですか？ 小道具では、簡単なものからオブジェクトまで、問題なくすべてを転送できます。 中央のボタンと同じですが、矢印が異なるボタンがもう1つ必要だとしましょう。 アンドロイドでは、4番目のボタンを描画するために実行し、その後、小道具に別のアイコンを渡します。



しかし、ここでさらに魔法が起こっています：

{true && <Text> </Text>} {false && <Text>  </Text>}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ポイントは、この方法では存在しないオブジェクトを表示できないことです。 動的型付けでJSを使用します。たとえば、次のように自分で便利に使用できます。

 const text = this.props.text; {text && <Text> {text} </Text>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

textパラメーターをpropsに渡した場合、コンポーネントはそれをレンダリングしますが、それを渡さなかった場合、それはしないので、なぜですか？ 動的型付けに再び焦点を当てる価値があります。 すべてはテキストで問題ありません。テキストはtrue、テキストはfalseではなく、オブジェクトと同じです。 しかし、数字の場合、問題は0を送信することです。JSはこれが間違っていると考えます...

ロジックは到達し始めますか？ 私たちは、その中にある可能性のあるすべての可能なオプションを考慮に入れたコンポーネントを作成し、上記で提示したデザインでそれらをラップします。

そして、ここで別の問題が発生する可能性があります-大きすぎるテキスト、大きすぎる画像などは、コンポーネントの外観を損なう可能性があります。 ここでは、アイテム番号3が役立ちます。

 <Text style={[styles.defaultStyle, this.props.customStyle]}> {this.props.text} </Text>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スタイルをスタイルの配列として定義します。 これはどういう意味ですか？ これは、スタイルを小道具に渡さない場合、コンポーネントはデフォルトになり、事前に決定したことを意味します。 しかし、カスタムスタイル、たとえば上からのインデントに1つのパラメーターを渡すとどうなりますか？ そして、このコンポーネントにはデフォルトのスタイルに加えて上部にパディングがあります。 ポイントは、デフォルトのスタイルが常に完全に適用され、カスタムスタイルで渡すパラメーターのみが置き換えられることです。 すなわち テキストの色のみを変更したい場合-問題ではありません。サイズ、インデント、その他の喜びは消えません。 また、スタイルにパラメーターが必要ない場合は、カスタムスタイルでこのパラメーターに値nullを渡します。

おわりに

reduxを使用してデータを操作することもできますが、これはフルサイズの記事用に設計された別個の哲学です。 私は、ネイティブ開発の後、reduxで働いたときに避けられないものを受け入れる5つの段階をすべて経たと言います。 しかし、その後、私は関与し、このアプローチを本当に尊重しました。



反応ネイティブは誰にとって最も重要な質問ですか？ はい、みんな。 製品を作成するとき、iOSとAndroidの2チームの開発者を確保する必要があります。 1つで十分です。 第一に、それは愚かに安く、必要な人が2倍少なくなり、第二に、便利です-バグが発生し、すぐに2つのプラットフォームに修正されました。 そして、真面目な人たちも参加し始めました。 FacebookとInstagramだけではなくなりました。 Airbnb、walmart、testa、これらの人は何かを知っていると思います）



そして、プロジェクトはバージョン1.0のリリースに近づいておらず、プロジェクトを開発するために一緒に集まった多くの著名な人たちはすでにそれに興味を持っています。 駅に到着することさえなかったが、電車を降りる前ではない電車に乗るというユニークな機会があります。 バージョン1.0の大量リリース前にこのツールを習得した人（特に携帯電話のネイティブ開発の経験がある人）は、他の人よりも大きな利点があります。