反応ネイティブプロジェクトを構築するための10のヒント

新しいプロジェクトを起動するときに、コードスタイル、言語、フォルダのレイアウト、および多くの周りに作られる多くの選択肢があります.一貫性は、きれいで、メンテナンス可能なコードベースを作成するための鍵です.したがって、一度は、通常、しばらくこれらの選択肢を固執する必要があります決定した.
時間と経験はどのような作品を教えてくれますし、何をしない.あなたはいつも誰かの経験を使用することができます.
ここでは、反応するネイティブプロジェクトを構築するためのトップ10のヒントを示します.

1 .使用するスクリプト
あなたがプレーンなJavaScriptに使用されているならはい、学習曲線のビットがあります.
はい、それは価値がある.
タイプJavaScriptは、全体の多くの容易にリファクタリングを行い、ときに右、あなたのコードに多くの信頼を与える.ガイドを使用してくださいdocs セットアップ命令のために.スタティックモードを有効にする"strict": true にcompilerOptions ).
また、あなたのCIでタイプチェックを加えることもできますtsc --noEmit , だからあなたのタイプに自信を持つことができます!

2 .モジュールエイリアスを設定する/src単一のモジュールのエイリアスを設定する/src (そして、/assets 必要に応じて、代わりに

import CustomButton from '../../../components/CustomButton';

することができます.

import CustomButton from '@src/components/CustomButton';

私はいつも@ または~ 前にsrc 強調表示するには別名です.
私は、人々が複数のタイプエイリアスをセットアップした実装を見ました@components , 一つ@screens , 一つ@util しかし、私は1つのトップレベルのエイリアスを明らかにした.
そこにTypesScriptでこれを設定するための便利なガイドがありますReact Native docs .

インラインスタイルの使用
インラインスタイルを使用するオプションを指定しますStyled Components .
私はスタイルのコンポーネントをオフにし、インラインスタイルに切り替えて、それはパフォーマンスの含意を使用されていたので、それはnegligible , だから今ちょうどそれは好みです.

コンポーネントごとのスタイルファイル
各コンポーネントは、独自のスタイルファイルを持つ必要がありますstyles.ts 拡張モジュール:

FirstComponent.tsx
FirstComponent.styles.ts
SecondComponent.tsx
SecondComponent.styles.tsx

注意.styles.ts ファイル名では、スタイルがコンポーネントに属していることを示すために使用するコンベンションだけです.ts ファイル.
各スタイルファイルは、コンポーネントの単一のスタイルオブジェクトをエクスポートします

// FirstComponent.styles.ts

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
});

export default styles;

各コンポーネントは独自のスタイルのみをインポートします.

// FirstComponent.tsx

import styles from './FirstComponent.styles';

...

グローバルなスタイルを使用
クリエイトアglobalStyles.ts ファイルのトップレベルのファイル/src ディレクトリ、および.styles.ts 必要に応じて.
常に定数を使用します.

色

フォント

フォントサイズ

間隔

最初は退屈に見えるかもしれませんが、長期的には便利です.そして、あなたがすべての単一のスペースのために定数を作成することになっているとわかるならば、デザイン・ガイドが一般的にそれを望まないように、それは優しく設計チームに持ち出す何かです.

フラットスタイル定数
の代わりに:

const globalStyles = {
  color: {
    blue: '#235789',
    red: '#C1292E',
    yellow: '#F1D302',
  },
};

こうする

const globalStyles = {
  colorBlue: '#235789',
  colorRed: '#C1292E',
  colorYellow: '#F1D302',
};

これは、これらのグループに誘惑することができますが、私はそれを平らに保つことがより便利であることがわかりましたcolorRed コードベースでは、検索と置換を行うことができますcolors.red 色が破壊されることができたので、それは難しくなります.

7 .スタイル定数の数値
の代わりに:

const globalStyles = {
  fontSize: {
    extraSmall: 8,
    small: 12,
    medium: 16,
    large: 18,
    extraLarge: 24,
  },
};

こうする

const globalStyles = {
  fontSize8: 8,
  fontSize12: 12,
  fontSize16: 16,
  fontSize18: 18,
  fontSize24: 24,
};

最初のオプションは、それを書き留めるときによりよく見えるかもしれませんが、開発中には、「媒体」と「大きい」を気にする傾向がありません.そして、デザイナーが必然的にフォントサイズ14を加えて、あなたの変数mediumSmall .

ファイルごとの1つのコンポーネント
新しいコンポーネントのテンプレートを示します.

import React from 'react';
import { View, Text } from 'react-native';
import styles from './App.styles';

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello, world!</Text>
    </View>
  );
};

export default App;

ここで注意するいくつかの事柄

クラス構成要素の上の機能コンポーネント:私は常に機能部品を使用して、フックを使ってどんな状態と副作用でも管理します

定数関数を使うconst and function ここは同様に良い.事実上function 長期的には良いかもしれない

デフォルトのエクスポート:私は常にデフォルトのエクスポートを使用しているが、引数は、名前を付けられた輸出は、彼らはrefactorに明確になりますので、私は同意することが作られている-私は同意する-それは次のステップかもしれない

個別部品・画面
以下に典型的なフォルダ構造を示します.

/assets
  /images
    image.png
    anotherImage.png
  /icons
    icon.svg
    anotherIcon.svg
/src
  /components
    Component1.tsx
    Component1.styles.ts
    Component1.test.ts
    Component2.tsx
    Component2.styles.ts
    Component2.test.ts
  /screens
    Screen.tsx
    Screen.styles.ts
    Modal.tsx
    Modal.styles.ts
  App.tsx
  globalStyles.ts
  types.ts

私は常に/components ディレクトリと画面と/screens ディレクトリ.使用する場合react-navigation , 画面とmodalsの間には構造的な違いはありませんが、ファイルを命名することで意図を区別することを好むSomethingModal.tsx .
注意するもう一つのものはファイル名です--ファイル名でフォルダを作成するのではなく、それぞれのファイルを命名しますindex.tsx , ファイル名はコンポーネント名を反映します.ほとんどのエディタでは、あなたが編集しているファイルを追跡するのは退屈ですindex.tsx私も、すべての構成要素が一つに輸入される実装を見ましたindex.ts ファイルからエクスポートします.私は個人的には、その解決のファンではなく、不要な余分なステップとして参照してください.

10あなたのコードをlint
それは価値がある.私を信じなさい!

用途eslint and prettier - 新しいプロジェクトを初期化するとき、彼らは実際にプリインストールされます

事前にコミットフックを設定する-私は通常、テスト用のリンギングフックとプレフックフックのプリコミットフックを設定します.すばらしいガイドがありますhere .

Cintでlint , test , typescriptエラーをチェック!これはとても重要です-プロジェクトライフサイクル全体で一貫したコードスタイルを確実にする唯一の方法.CIの設定は、新しいプロジェクトを始めるときの最初のことの一つです.

これが助ける望み!私がここにリストしなかったあなた自身のどんな先端も得ましたか?コメントで知らせてください!👀