web-dev-qa-db-ja.com

反応ネイティブでカスタムフォントを追加する方法android

私はreact-nativeを学習しています。学習のためだけにいくつかのデモアプリを作成しようとしています。ツールバータイトルのroboto thinにfontFamilyを設定したい。

Androidプロジェクトのassets/fontsフォルダにroboto thin ttfを追加しましたが、アプリの実行中に問題が発生しているようです。実行中にこの問題が発生します

反応ネイティブ開始

ERROR  EPERM: operation not permitted, lstat 'E:\Myntra\Android\app\build\gener
ated\source\r\debug\Android\support\v7\appcompat'
{"errno":-4048,"code":"EPERM","syscall":"lstat","path":"E:\\Myntra\\Android\\app
\\build\\generated\\source\\r\\debug\\Android\\support\\v7\\appcompat"}
Error: EPERM: operation not permitted, lstat 'E:\Myntra\Android\app\build\genera
ted\source\r\debug\Android\support\v7\appcompat'
    at Error (native)

フォントを削除すると、正常に動作します。私はこの問題を修正することができません。これの理由になり得るものを誰かが私に手伝ってくれるでしょうか。

前もって感謝します。

androidreact-nativereact-native-android
14
N Sharma

  1. フォントファイルを追加する

    • Project folder/Android/app/src/main/assets/fonts/font_name.ttf
  2. react-native run-Androidを使用してパッケージマネージャを再起動します
  3. 次に、フォントを自分のスタイルで使用できます。例：
    • fontFamily: 'font_name'

その他の例については、ここをチェックしてください カスタムフォントの例

15
Sport

すべてのフォントをReact-Nativeプロジェクトディレクトリに配置する

./assets/fonts/

Package.jsonに次の行を追加します

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

最後にプロジェクトディレクトリからターミナルで実行します

$ react-native link

それをあなたのスタイルでこのように宣言して使用するには

fontFamily: 'your-font-name without extension'

フォントがRaleway-Bold.ttfの場合、

fontFamily: 'Raleway-Bold'
27
Nitin Anand

バージョン0.60未満のネイティブ対応のカスタムフォントを追加するための多くの回答があります。

react-nativeバージョン> 0.6を使用している場合、'rnpm' is deprecatedとカスタムフォントは機能しません。

ここで、反応ネイティブバージョン> 0.60でカスタムフォントを追加するには、次の操作を行う必要があります。

1-プロジェクトのルートフォルダにreact-native.config.jsという名前のファイルを作成します。

2-新しいファイルにこれを追加します

module.exports = {
project: {
    ios: {},
    Android: {},
},
assets: ['./assets/fonts']
};

3-ルートプロジェクトパスでreact-native linkコマンドを実行します。

[〜＃〜] ps [〜＃〜]react-native linkコマンドを実行する前に、フォントフォルダの正しいパスがあることを確認してください

6
Harshit Agrawal

Reactを使用している場合、ネイティブの可能性は Expo も使用していることです。その場合は、Expoの Font.loadAsync メソッド。

手順：

  1. ダウンロードしたフォントを./assets/fontsディレクトリに配置します（ディレクトリが存在しない場合は作成します）

  2. ターゲットコンポーネント（例：App.js）からExpoのFontモジュールをロードします。

    import { Font } from 'expo'

  3. componentDidMount を使用してカスタムフォントをロードします。

    componentDidMount() {
  Font.loadAsync({
    'Roboto': require('../assets/fonts/Roboto-Regular.ttf'),
  })  
}

  4. 最後に、style属性を使用して、<Text>コンポーネントに目的のフォントを適用します。

    <Text style={{fontFamily: 'Roboto', fontSize: 38}}>Wow Such Title</Text>
4
Juan Marco

EXPOを使用したカスタムフォントの追加

Reactを使用している場合は、Expoも使用している可能性があります。その場合は、ExpoのFont.loadAsyncメソッドを使用してカスタムフォントをロードできます。

手順

  1. フォントをasset/fontsフォルダーに移動します
  2. ターゲットコンポーネント（例：App.js）からExpoのFontモジュールをロードします。
import { Font } from 'expo'
  1. 状態を設定する
this.state = {
   fontLoaded: false
}
  1. ComponentDidMountを使用してカスタムフォントをロードします。
async componentDidMount() {
   await Font.loadAsync({
       'ComicSansBold': require('../assets/fonts/ComicSansMSBold.ttf'),
   })

   this.setState({fontLoaded: true})
}
  1. 最後に、style属性を使用して、コンポーネントに目的のフォントを適用します。
{
  this.state.fontLoaded
  ? <Text style={{
    fontSize: 48,
    fontFamily: 'ComicSansBold'
    }}>Glad to Meet You!</Text>
  : null
}

コーディングをお楽しみください...

私の出力： How to add custom font in react native

0
Chhay Rith Hy

@ nitin-anandの回答が他の回答よりも最も適切で明確でしたが、その方法は廃止されており、例として次の構成でルートにreact-native.config.jsファイルを作成する必要があります。

module.exports = {
 project: {
  ios: {},
  Android: {},
 },
 assets: ['./assets/fonts'], 
};
0
Muhammad Ovi