反応ネイティブアプリケーションのテキストにいくつか変更を加えています。段落にはRoboto light、タイトルにはRoboto Boldを指定する必要があります。 iOSとAndroidアプリの両方でテキストの外観を同じにする必要があるため、両方で機能させる必要があります。このコード行のコードを試しました
text : { fontFamily: 'sans-serif-light' },
私は公式ドキュメントからこのタイプを試しましたが、うまくいきます
title : { fontFamily: 'Cochin' },
->問題はRobotoフォントファミリー自体にあると思います..何か助けはありますか?
アプリにカスタムフォントを追加するには、すべてのttfファイルをディレクトリに保存します。次のコードをpackage.jsonファイルに追加します。
"rnpm": { "assets": [ "./fonts" // yours fonts directory ] }
次にreact-native link
を実行します。フォントを使用するには、fontFamilyのttfファイルで同じ名前を使用します。
_sans-serif-light
_およびRoboto
はAndroid専用のフォントです。 iOSには異なるフォントが必要です。このリポジトリには、iOSおよびAndroid- https://github.com/react-native-training/react-native-fonts で使用可能なフォントのリストがあります。
Platform.select()
を使用して、OSごとに異なるフォントをターゲットにすることができます。
_title: {
...Platform.select({
ios: { fontFamily: 'Arial', },
Android: { fontFamily: 'Roboto' }
})
}
_
それが役立つ場合は、同様の問題がありました。 「react-native link」を使用しても、「Build Phases> Copy Bundle Resource」のフォントが実際に参照されていましたが、Info.plistファイルには何も追加されていませんでした。
Info.plistにフォントを追加すると、問題が解決しました。
<key>UIAppFonts</key>
<array>
<string>Roboto-Black.ttf</string>
</array>
最近同じ問題がありました。 rnpm
コマンドは非推奨であり、reactネイティブcli構成を使用してカスタムアセットを追加できることがわかりました。 https://github.com/react-native-community/cli/blob/master/docs/configuration.md
プロジェクトにフォントを追加するには:
プロジェクトのルートディレクトリにreact-native.config.js
としてファイルを作成します。次のコードを追加します
module.exports={
assets:[
"./assets/fonts"
]
}
react-native link
を実行します
プロジェクトを実行します:npx react-native run-ios
注:IOSのビルドが失敗した場合は、xocdeワークスペース設定を開き、ビルドシステムをレガシービルドシステムに変更します。
RobotoはAndroidのデフォルトのフォントファミリーです。 RobotoをiOSに追加して、Androidの場合はfontFamily
を省略して RRikesh ソリューションを使用することができます。
import {
Platform,
StyleSheet,
} from 'react-native'
const stylesByPlatform = Platform.select({
ios: { fontFamily: 'Roboto' },
Android: { },
})
export default StyleSheet.create({
text: {
...stylesByPlatform,
color: '#000000',
},
})
IOSの場合、Roboto fontFamilyを追加する必要があります。
./assets/fonts/Roboto
{
...
"rnpm": {
"assets": [
"./assets/fonts"
]
}
}
実行:react-native link
(iOSではttfファイルをリンクし、Androidではそれらをコピーします)
Android/app/src/main/assets/fonts
に追加されたRobotoファイルを削除するこのタイプのコンテンツが公式ドキュメントにない理由は本当にわかりません。 :(