RN(Reacct Native)でカスタムフォントを使う方法

2019-05-03

RN(React Native)プロジェクトでカスタムフォントを適用して使う方法について説明します。

概要

アプリを開発する時、フォントを適用する場合があります。ここにはRN(React Native)ではどうやってフォントを適用して使うかを紹介します。私は普通グーグルのNoto Sansフォントを使っています。

このブログではフォントが適用されたかはっきりするため、下記のフォントを適用して使う方法を説明します。

フォントダウンロード

RN(React Native)で使いたいフォントをダウンロードします。ここでは概要でも紹介したDancing Scriptフォントを使います。下記のリンクを押してダウンロードページに移動します。

上のリンクを選択したら下記のような画面が見えます。

RN(React Native)カスタムフォント適用 - google dancing script

右上のSELECT THIS FONTを選択します

RN(React Native)カスタムフォント適用 - フォント選択

そしたら上のように右下にFamily Selectedが表示されます。Family Selectedをクリックします。

RN(React Native)カスタムフォント適用 - フォントダウンロード

上のような画面が見えたら、右上にあるダウンロードボタンを押してフォントをダウンロードします。

フォント適用

ダウンロードしたフォントを各OSに合わせて設定する必要があります。その前、共通であるJSソースから修正します。

javascriptソース修正

フォントを適用するため下記のようにソースコードを修正します。

import * as React from 'react';
import { Platform } from 'react-native';
import Styled from 'styled-components/native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

const Container = Styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: #F5FCFF;
`;
const Welcome = Styled.Text`
  font-size: 20px;
  text-align: center;
  margin: 10px;
  font-family: 'DancingScript-Bold'; // <<<<<<<<<<<<< Add here
`;
const Instructions = Styled.Text`
  text-align: center;
  color: #333333;
  margin-bottom: 5px;
  font-family: 'DancingScript-Regular'; // <<<<<<<<<<<<< Add here
`;

interface Props {}
interface State {}

export default class App extends React.Component<Props, State> {
  render() {
    return (
      <Container>
        <Welcome>Welcome to React Native!</Welcome>
        <Instructions>To get started, edit App.js</Instructions>
        <Instructions>{instructions}</Instructions>
      </Container>
    );
  }
}

私は普通RN(React Naitve)プロジェクトにtypescriptstyled-componentsを使って開発しています。それでソースの形がちょっと違うかも知れないです。RN(React Native)プロジェクトにtypescriptstyled-componentsを適用する方法に関しては下記のブログを参考してください。

iOS

RN(React Native)プロジェクトを実行したら下記のように基本フォントが適用された画面が見えます。(またはフォントが見つからないのでエラーが発生します。)

RN(React Native)カスタムフォントios適用 - 基本フォント

ダウンロードしたフォントファイルをios/Fontsフォルダを作ってその中にコピーします。

RN(React Native)カスタムフォントios適用 - フォントコピー

フォントファイルをコピーしたらios/project_name.xcodeprojios/project_name.xcworkspaceを実行してxcodeを実行します。

RN(React Native)カスタムフォントios適用 - xcodeにフォントを入れる

左上に自分のプロジェクト名を右クリックしてAdd Files to "project_name"...を選択します。

RN(React Native)カスタムフォントios適用 - xcodeにフォント追加

上のようなファイル選択画面が見えたら上で追加したios/Fontsフォルダを選択してCreate folder referencesを選択した後、Addを押してフォルダを追加します。

RN(React Native)カスタムフォントios適用 - Info.plistにフォントを追加

左上にあるプロジェクト名を選択してTARGETSも自分のプロジェクトを選択します。上部にあるメニューでInfoを選択してInfo.plistの内容を確認します。Info.plistFonts provided by applicationを追加して上のようにフォントファイルを追加します。

RN(React Native)プロジェクトをまた実行したら下のようにフォントが適用されたことが確認できます。

RN(React Native)カスタムフォントios適用

アンドロイド

アンドロイドでRN(React Native)プロジェクトを実行したら下記のように基本フォントが適用された画面が見えます。

RN(React Native)カスタムフォントアンドロイド適用 - 基本フォント

アンドロイドはiOSよりもっと簡単に適用できます。android/app/src/main/assets/fontsフォルダを生成した後ダウンロードしたフォントファイルをコピーします。

RN(React Native)カスタムフォントアンドロイド適用 - フォント追加

そしてRN(React Native)プロジェクトを実行したら下記のようにフォントが適用されたことを確認できます。

RN(React Native)カスタムフォントアンドロイド適用 - カスタムフォント適用

Githubレポジトリ(Repository)

上の内容で作ったプロジェクトをgithubに公開しています。もし、うまく行かない方はレポジトリ(Repository)をコピー(Clone)して直接確認してみてください。

完了

これでRN(React Native)プロジェクトにカスタムフォントを適用する方法について見てみました。アプリを美しく表現するにはやはりフォントもとても重要と思います。皆さんもカスタムフォントを適用してアプリをもっと美しく作ってみてください。

Buy me a coffeeBuy me a coffee
Posts