web-dev-qa-db-ja.com

フォントファミリーRobotoは軽量で太字でネイティブに反応します

反応ネイティブアプリケーションのテキストにいくつか変更を加えています。段落にはRoboto light、タイトルにはRoboto Boldを指定する必要があります。 iOSとAndroidアプリの両方でテキストの外観を同じにする必要があるため、両方で機能させる必要があります。このコード行のコードを試しました

text : { fontFamily: 'sans-serif-light' },

しかし、私はこのエラーを受け取ります： enter image description here

私は公式ドキュメントからこのタイプを試しましたが、うまくいきます

title : { fontFamily: 'Cochin' },

->問題はRobotoフォントファミリー自体にあると思います..何か助けはありますか？

textfontsreact-nativefont-familyroboto
6
user3521011

アプリにカスタムフォントを追加するには、すべてのttfファイルをディレクトリに保存します。次のコードをpackage.jsonファイルに追加します。

"rnpm": { "assets": [ "./fonts" // yours fonts directory ] }

次にreact-native linkを実行します。フォントを使用するには、fontFamilyのttfファイルで同じ名前を使用します。

11
Roman Akash

_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' }
  })
}
_
7
RRikesh

それが役立つ場合は、同様の問題がありました。 「react-native link」を使用しても、「Build Phases> Copy Bundle Resource」のフォントが実際に参照されていましたが、Info.plistファイルには何も追加されていませんでした。

Info.plistにフォントを追加すると、問題が解決しました。

<key>UIAppFonts</key>
<array>
    <string>Roboto-Black.ttf</string>
</array>
2
Benoit

最近同じ問題がありました。 rnpmコマンドは非推奨であり、reactネイティブcli構成を使用してカスタムアセットを追加できることがわかりました。 https://github.com/react-native-community/cli/blob/master/docs/configuration.md

プロジェクトにフォントを追加するには：

  • フォントをダウンロードして、assets/fontsフォルダーに配置します。

プロジェクトのルートディレクトリにreact-native.config.jsとしてファイルを作成します。次のコードを追加します

module.exports={
    assets:[
        "./assets/fonts"
    ]
}

react-native linkを実行します

プロジェクトを実行します：npx react-native run-ios

注：IOSのビルドが失敗した場合は、xocdeワークスペース設定を開き、ビルドシステムをレガシービルドシステムに変更します。

2
Tanver Hasan

Android/iOSの両方にRobotoを設定します。

使用法

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を追加する必要があります。

  1. Google Fonts からRobotoフォントをダウンロードします
  2. アセットフォルダーに追加します./assets/fonts/Roboto

  3. packages.jsonにアセットフォルダーを追加 ：

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

  4. 実行：react-native link（iOSではttfファイルをリンクし、Androidではそれらをコピーします）

  5. Android/app/src/main/assets/fontsに追加されたRobotoファイルを削除する
  6. アプリを再構築し、????。

このタイプのコンテンツが公式ドキュメントにない理由は本当にわかりません。 :(

1
Erick M. Sprengel