react native font demo下载 - react native font demo源代码下载

逐步指南，用于一致的多平台字体字体体验React Native

目标

能够在iOS和Android中使用字体字体修饰符，例如fontWeight和fontStyle与自定义字体家族结合使用。

 < Text style = { {
  fontFamily : "Raleway" ,
  fontWeight : "100" ,
  style : "italic"
} } >
  Hello world!
</ Text >
< Text style = { {
  fontFamily : "Raleway" ,
  fontWeight : "bold" ,
  style : "normal"
} } >
  Hello world !
< / Text >

在此示例中，我们将注册Raleway字体家庭。当然，此方法将使用任何TTF字体。

先决条件

资产

您需要在临时文件夹中提取的整个Raleway字体系列。那是：

Raleway-Thin.ttf （100）
Raleway-ThinItalic.ttf
Raleway-ExtraLight.ttf （200）
Raleway-ExtraLightItalic.ttf
Raleway-Light.ttf （300）
Raleway-LightItalic.ttf
Raleway-Regular.ttf （400）
Raleway-Italic.ttf
Raleway-Medium.ttf （500）
Raleway-MediumItalic.ttf
Raleway-SemiBold.ttf （600）
Raleway-SemiBoldItalic.ttf
Raleway-Bold.ttf （700）
Raleway-BoldItalic.ttf
Raleway-ExtraBold.ttf （800）
Raleway-ExtraBoldItalic.ttf
Raleway-Black.ttf （900）
Raleway-BlackItalic.ttf

我们将假设这些文件现在存储在/tmp/raleway/ 。

找到字体姓氏

您将需要系统中安装OTFINFO来执行此步骤。它带有许多Linux分布。在MacOS上，通过LCDF型酿造啤酒包进行安装。

otfinfo --family Raleway-Regular.ttf

应该打印“ Raleway”。必须保留此值的Android设置。此名称将以fontFamily样式使用。

设置

react-native init FontDemo
cd FontDemo

安卓

对于Android，我们将使用XML字体来定义基本字体系列的变体。

备注：此过程可在React Native中获得，因为COMPL FD6386A07EB75A8EC16B1384A3E3E5827DEA520B64（2019年5月7日），并添加了ReactFontManager::addCustomFont方法。

1。将资产复制并重命名为资源字体文件夹

mkdir android/app/src/main/res/font
cp /tmp/raleway/ * .ttf android/app/src/main/res/font

我们必须按照以下规则重命名字体文件，以符合Android资产名称限制：

用_替换- ;
用小写字母替换所有大写字母。

您可以使用以下bash脚本（确保将字体文件夹作为第一个参数）：

 #! /bin/bash
# fixfonts.sh

typeset folder= " $1 "
if [[ -d " $folder " && ! -z " $folder " ]] ; then
  pushd " $folder " ;
  for file in * .ttf ; do
    typeset normalized= " ${file // - / _} " ;
    normalized= " ${normalized,,} " ;
    mv " $file " " $normalized "
  done
  popd
fi

./fixfonts.sh /path/to/root/FontDemo/android/app/src/main/res/font

2。创建定义文件

使用以下内容创建android/app/src/main/res/font/raleway.xml文件。基本上，我们必须为我们希望支持的每个fontStyle / FontStyle / fontWeight组合创建一个条目，并注册相应的资产名称。

<? xml version = " 1.0 " encoding = " utf-8 " ?>
< font-family xmlns : app = " http://schemas.android.com/apk/res-auto " >
    < font app : fontStyle = " normal " app : fontWeight = " 100 " app : font = " @font/raleway_thin " />
    < font app : fontStyle = " italic " app : fontWeight = " 100 " app : font = " @font/raleway_thinitalic " />
    < font app : fontStyle = " normal " app : fontWeight = " 200 " app : font = " @font/raleway_extralight " />
    < font app : fontStyle = " italic " app : fontWeight = " 200 " app : font = " @font/raleway_extralightitalic " />
    < font app : fontStyle = " normal " app : fontWeight = " 300 " app : font = " @font/raleway_light " />
    < font app : fontStyle = " italic " app : fontWeight = " 300 " app : font = " @font/raleway_lightitalic " />
    < font app : fontStyle = " normal " app : fontWeight = " 400 " app : font = " @font/raleway_regular " />
    < font app : fontStyle = " italic " app : fontWeight = " 400 " app : font = " @font/raleway_italic " />
    < font app : fontStyle = " normal " app : fontWeight = " 500 " app : font = " @font/raleway_medium " />
    < font app : fontStyle = " italic " app : fontWeight = " 500 " app : font = " @font/raleway_mediumitalic " />
    < font app : fontStyle = " normal " app : fontWeight = " 600 " app : font = " @font/raleway_semibold " />
    < font app : fontStyle = " italic " app : fontWeight = " 600 " app : font = " @font/raleway_semibolditalic " />
    < font app : fontStyle = " normal " app : fontWeight = " 700 " app : font = " @font/raleway_bold " />
    < font app : fontStyle = " italic " app : fontWeight = " 700 " app : font = " @font/raleway_bolditalic " />
    < font app : fontStyle = " normal " app : fontWeight = " 800 " app : font = " @font/raleway_extrabold " />
    < font app : fontStyle = " italic " app : fontWeight = " 800 " app : font = " @font/raleway_extrabolditalic " />
    < font app : fontStyle = " normal " app : fontWeight = " 900 " app : font = " @font/raleway_black " />
    < font app : fontStyle = " italic " app : fontWeight = " 900 " app : font = " @font/raleway_blackitalic " />
</ font-family >

3。注册新字体

在android/app/src/main/java/com/fontdemo/MainApplication.java中，使用我们刚刚在onCreate方法中创建的资产来绑定字体家族名称。

配x如果要注册其他字体，请确保将“ Raleway”替换为前一步中的名称（查找字体姓氏）。

 --- a/android/app/src/main/java/com/fontdemo/MainApplication.java
+++ b/android/app/src/main/java/com/fontdemo/MainApplication.java
@@ -7,6 +7,7 @@ import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
+ import com.facebook.react.views.text.ReactFontManager;
 import com.facebook.soloader.SoLoader;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
@@ -43,6 +44,7 @@ public class MainApplication extends Application implements ReactApplication {
   @Override
   public void onCreate() {
     super.onCreate();
+    ReactFontManager.getInstance().addCustomFont(this, "Raleway", R.font.raleway);
     SoLoader.init(this, /* native exopackage */ false);
     initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   }

在反应天然0.73+上

 --- a/android/app/src/main/java/com/fontdemo/MainApplication.kt
+++ b/android/app/src/main/java/com/fontdemo/MainApplication.kt
import com.facebook.react.ReactApplication
import com.facebook.react.ReactHost
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
+ import com.facebook.react.common.assets.ReactFontManager
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.facebook.react.defaults.DefaultReactNativeHost


  override fun onCreate() {
    super.onCreate()
+    ReactFontManager.getInstance().addCustomFont(this, "Raleway", R.font.raleway);
    SoLoader.init(this, false)
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      // If you opted-in for the New Architecture, we load the native entry point for this app.
      load()
    }
    ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
  }

ios

在iOS上，事情会变得容易得多。我们基本上只需要使用React Native Asset Link功能。此方法要求我们将在第一步中检索到的字体家族名称作为fontFamily样式属性。

将字体文件复制到资产文件夹

mkdir -p assets/fonts
cp /tmp/raleway/ * .ttf assets/fonts

添加`react-native.config.js`

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

关联

 # react-native >= 0.69
npx react-native-asset

# otherwise
react-native link

结果

ios	安卓

Postscriptum

如果您发现本指南相关，我将非常感谢您对此stackoverflow的答案进行投票。这也将有助于社区找出这一解决方案。干杯!

展开

react native font demo

逐步指南，用于一致的多平台字体字体体验React Native

目标

先决条件

资产

找到字体姓氏

设置

安卓

1。将资产复制并重命名为资源字体文件夹

2。创建定义文件

3。注册新字体

ios

将字体文件复制到资产文件夹

添加`react-native.config.js`

关联

结果

Postscriptum

ComfyUI IC Light Native

react native

genyo font

genwan font

genryu font

运动员工作室演示

chat.petals.dev

GPT Prompt Templates

GPTyped

fedraserif

fontplayer

XiaoyaPixel

Google Dorks

shepherd

mongo express

react native font demo

逐步指南，用于一致的多平台字体字体体验React Native

目标

先决条件

资产

找到字体姓氏

设置

安卓

1。将资产复制并重命名为资源字体文件夹

2。创建定义文件

3。注册新字体

ios

将字体文件复制到资产文件夹

添加react-native.config.js

关联

结果

Postscriptum

添加`react-native.config.js`