React Nativeアプリケーションで視覚的に魅力的でユーザーフレンドリーなデザインを作成するには、タイポグラフィの習得が不可欠です。このガイドでは、フォントウェイトを効果的に管理し、カスタムフォントをプロジェクトに組み込む方法について説明します。
目次
フォントウェイトのスタイル設定
React Nativeでは、Textコンポーネント内のfontWeightスタイルプロパティを使用して、フォントウェイトを簡単に制御できます。このプロパティは、数値（100〜900）と定義済みのキーワードを受け入れます。
'normal'：400と同等。'bold'：700と同等。'100'、'200'、'300'、'400'、'500'、'600'、'700'、'800'、'900'：特定のウェイト値。
異なるフォントウェイトを示す例を以下に示します。
import React from 'react';
import { Text, StyleSheet } from 'react-native';
const MyComponent = () => {
return (
<Text style={styles.text}>
これはノーマルウェイト（400）です。<Text style={styles.boldText}>これはボールド（700）です。 <Text style={styles.lightText}>これはライト（300）です。
</Text>
);
};
const styles = StyleSheet.create({
text: {
fontSize: 16,
},
boldText: {
fontWeight: 'bold',
},
lightText: {
fontWeight: '300',
},
});
export default MyComponent;
フォントウェイトのレンダリングは、選択したフォントファミリーによって異なります。すべてのフォントがすべてのウェイトをサポートしているわけではありません。特定のウェイトがサポートされていない場合、React Nativeは最も近いウェイトにフォールバックします。
カスタムフォントの組み込み
デフォルトのシステムフォントを超えたデザインの可能性を広げるには、カスタムフォントを追加して使用します。これにより、アプリの視覚的な魅力とブランディングが向上します。
- フォントファイルの追加：フォントファイル（例：
.ttf、.otf）をプロジェクトのアセット内の専用のフォルダー（例：src/assets/fonts）に配置します。 - フォントの登録（Expo）：Expoを使用する場合は、
expo-fontを使用します。
import { useFonts } from 'expo-font';
import MyCustomFont from './assets/fonts/MyCustomFont.ttf';
export default function App() {
const [loaded] = useFonts({
'MyCustomFont': require('./assets/fonts/MyCustomFont.ttf'),
});
if (!loaded) return null;
return (
<Text style={{ fontFamily: 'MyCustomFont', fontWeight: 'bold' }}>カスタムフォントテキスト</Text>
);
}
- フォントの登録（Expo以外）：Expo以外のプロジェクトでは、より手動的なアプローチが必要になる場合があります（この例では、プラットフォーム固有の処理のプレースホルダーを使用しています。必要に応じて調整してください）。
import React from 'react';
import { Text, StyleSheet, Platform } from 'react-native';
import MyCustomFont from './assets/fonts/MyCustomFont.ttf'; // 必要に応じてパスを調整してください
const App = () => {
return (
<Text style={styles.text}>これはカスタムフォントを使用しています。
);
};
const styles = StyleSheet.create({
text: {
fontSize: 18,
fontFamily: Platform.OS === 'ios' ? 'MyCustomFont' : 'MyCustomFont', // ここで異なるOSを処理します。
},
});
export default App;
- 登録済みのフォントの使用：登録後、
TextコンポーネントのfontFamilyスタイルプロパティでフォントファミリー名を使用します。名前が登録時に使用したフォントファイル名と一致していることを確認してください。
フォントウェイトとカスタムフォントの手法を組み合わせることで、React Nativeアプリで正確なタイポグラフィック制御を実現し、視覚的な一貫性を向上させ、よりプロフェッショナルなユーザーエクスペリエンスを実現できます。一貫したレンダリングを保証するために、徹底的なクロスデバイステストを行ってください。