react-native
カスタムフォント

React Native（Android）でカスタムフォントを使用する手順

1. あなたのフォントファイルをandroid/app/src/main/assets/fonts/font_name.ttf貼り付けてください。
2. react-native run-androidしてAndroidアプリを再コンパイルする
3. 今、あなたはあなたのReact Native StylesでfontFamily: 'font_name'使うことができfontFamily: 'font_name'

React Native（iOS）でカスタムフォントを使用する手順

1. Xcodeプロジェクトにフォントを含めます。

2.それらがTarget Membership列に含まれていることを確認します

ナビゲータからフォントをクリックし、フォントが含まれているかどうかを確認します。

3.バンドルにResourceとして含まれているフォントがあるかどうか確認します

あなたのXcodeプロジェクトファイルをクリックし、 "Build Phases"を選択し、 "Bundle Resourcesをコピー"を選択します。

4. Application Plist（Info.plist）にフォントを含めます。

Info.plistを開き、 "Information Property List"をクリックし、プラス記号（+）をクリックします。ドロップダウンリストから「アプリケーションが提供するフォント」を選択します。

5.アプリケーションが提供するフォントにフォント名を追加する

アプリケーションによって提供されるフォントを展開し、フォント名を値の列に正確に追加する

6. アプリケーションで使用する

    <Text style={{fontFamily:'IndieFlower'}}>
      Welcome to React Native!
    </Text>
   

AndroidとIOSのカスタムフォント

• プロジェクトフォルダにフォルダを作成し、フォントを追加します。例：

  • 例：ここでは、 "mystuff"という名前のルートに "fonts"というフォルダを追加し、その中にフォントを配置しました。
    • 

• 以下のコードをpackage.json追加してください。

  {
      ...
  
      "rnpm": {
          "assets": [
            "path/to/fontfolder"
          ]
      },
  
      ...
  }
  

  • 上記の例では、package.jsonのパスは "mystuff / fonts"になります。

    "rnpm": {
      "assets": [
        "mystuff/fonts"
      ]
    }
    

• react-native linkコマンドを実行します。

• 下のコードでカスタムフォントを使用する

  <Text style={{ fontFamily: 'FONT-NAME' }}>
      My Text
  </Text>
  

  ここで、 FONT-NAMEはプラットフォーム固有の接頭辞です。

  アンドロイド

  FONT-NAMEは、ファイル内の拡張子の前の単語です。例：フォントのファイル名はRoboto-Regular.ttf 、 fontFamily: Roboto-Regular設定しfontFamily: Roboto-Regular 。

  iOS

  FONT-NAMEは、フォントファイルを右クリックしてから「情報を見る」をクリックすると、「フルネーム」となります。 （ソース： https : MM Proxima Nova Ultra bold.otf ）、下のスクリーンショットでは、ファイル名はMM Proxima Nova Ultra bold.otf 、「フルネーム」は「Proxima Nova Semibold」です。 set fontFamily: Proxima Nova Semibold 。スクリーンショット -

• react-native run-iosまたはreact-native run-android再度react-native run-android （これはリソースと再コンパイルされます）