自定义字体的React Native问题(无法识别)

x6h2sr28  于 2023-06-30  发布在  React
关注(0)|答案(1)|浏览(139)

我试图在我的react native项目中设置自定义字体,我已经遵循了几个教程中的所有步骤,但由于某种原因,它根本无法检测到字体。
https://blog.logrocket.com/adding-custom-fonts-react-native/
我的InfoPList-dev:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleDevelopmentRegion</key>
    <string>en</string>
    <key>CFBundleDisplayName</key>
    <string>Pizza Planet Dev</string>
    <key>CFBundleExecutable</key>
    <string>$(EXECUTABLE_NAME)</string>
    <key>CFBundleIdentifier</key>
    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>6.0</string>
    <key>CFBundleName</key>
    <string>$(PRODUCT_NAME)</string>
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleShortVersionString</key>
    <string>$(MARKETING_VERSION)</string>
    <key>CFBundleSignature</key>
    <string>????</string>
    <key>CFBundleVersion</key>
    <string>$(CURRENT_PROJECT_VERSION)</string>
    <key>LSRequiresIPhoneOS</key>
    <true/>
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string></string>
    <key>UILaunchStoryboardName</key>
    <string>LaunchScreen</string>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>armv7</string>
    </array>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>
    <key>UIAppFonts</key>
    <array>
        <string>Roboto-Black.ttf</string>
        <string>Roboto-BlackItalic.ttf</string>
        <string>Roboto-Bold.ttf</string>
        <string>Roboto-BoldItalic.ttf</string>
        <string>Roboto-Italic.ttf</string>
        <string>Roboto-Light.ttf</string>
        <string>Roboto-LightItalic.ttf</string>
        <string>Roboto-Medium.ttf</string>
        <string>Roboto-MediumItalic.ttf</string>
        <string>Roboto-Thin.ttf</string>
        <string>Roboto-ThinItalic.ttf</string>
    </array>
</dict>
</plist>

link-assets-manifest.json(由npx react-native-asset创建):

{
  "migIndex": 1,
  "data": [
    {
      "path": "../assets/fonts/Roboto-Black.ttf",
      "sha1": "3f8e401d808f6ce84b542266726514ac8be73171"
    },
    {
      "path": "assets/fonts/Roboto-BlackItalic.ttf",
      "sha1": "03d6e3747d862385dbe48e8296385b9236101a62"
    },
    {
      "path": "assets/fonts/Roboto-Bold.ttf",
      "sha1": "62442a18a9fe9457c1afeabf683d263a691b7798"
    },
    {
      "path": "assets/fonts/Roboto-BoldItalic.ttf",
      "sha1": "2f10ad9e8cab0880182705c4e0fbaeabae706e64"
    },
    {
      "path": "assets/fonts/Roboto-Italic.ttf",
      "sha1": "65f3f6a7e1bd2fa6f2df35e4b07775d7f1dde4f0"
    },
    {
      "path": "assets/fonts/Roboto-Light.ttf",
      "sha1": "18788c5d630fa695f9283f6393bfa541b2031508"
    },
    {
      "path": "assets/fonts/Roboto-LightItalic.ttf",
      "sha1": "6e01f9df9449565697032b002706a94b51862bbe"
    },
    {
      "path": "assets/fonts/Roboto-Medium.ttf",
      "sha1": "3c6a09fcc6a454924c81af7dff94fc6d399ed79b"
    },
    {
      "path": "assets/fonts/Roboto-MediumItalic.ttf",
      "sha1": "b3aa2d8f16d5a331fdced82f213a052b204eaca0"
    },
    {
      "path": "assets/fonts/Roboto-Thin.ttf",
      "sha1": "58c733e22bceeaf9609ce578eca92ac303c6d92f"
    },
    {
      "path": "assets/fonts/Roboto-ThinItalic.ttf",
      "sha1": "cc79d5a23bd0ec08b1d99f5390bf33cacc3082f4"
    }
  ]
}

react-native.config.js

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

用途:

export function Home() {
  const { colors } = useTheme()

  return (
    <View style={[styles(colors).container]}>
      <Text>Ola isso é um teste</Text>
      <Text style={{ fontFamily: 'Roboto-Black' }}>Ola isso é um teste</Text>
    </View>
  )
}

我收到的错误是:

文件夹结构:

oxf4rvwz

oxf4rvwz1#

iOS需要postScript名称来标识字体。你需要用它的postScript名称重命名字体:
示例:

  1. Roboto-Regular.ttf
  2. Roboto-Medium.ttf
  3. Roboto-Light.ttf
    下载Roboto字体系列变体及其各自的postScript名称-https://github.com/PolymerElements/font-roboto-local/tree/master/fonts/roboto
    Roboto字体家族元数据:
{
  "name": "Roboto",
  "designer": "Christian Robertson",
  "license": "Apache2",
  "visibility": "External",
  "category": "Sans Serif",
  "size": 86523,
  "fonts": [
    {
      "name": "Roboto",
      "style": "normal",
      "weight": 100,
      "filename": "Roboto-Thin.ttf",
      "postScriptName": "Roboto-Thin",
      "fullName": "Roboto Thin",
      "copyright": "Copyright 2011 Google Inc. All Rights Reserved."
    },
    {
      "name": "Roboto",
      "style": "italic",
      "weight": 100,
      "filename": "Roboto-ThinItalic.ttf",
      "postScriptName": "Roboto-ThinItalic",
      "fullName": "Roboto Thin Italic",
      "copyright": "Copyright 2011 Google Inc. All Rights Reserved."
    },
    {
      "name": "Roboto",
      "style": "normal",
      "weight": 300,
      "filename": "Roboto-Light.ttf",
      "postScriptName": "Roboto-Light",
      "fullName": "Roboto Light",
      "copyright": "Copyright 2011 Google Inc. All Rights Reserved."
    },
    {
      "name": "Roboto",
      "style": "italic",
      "weight": 300,
      "filename": "Roboto-LightItalic.ttf",
      "postScriptName": "Roboto-LightItalic",
      "fullName": "Roboto Light Italic",
      "copyright": "Copyright 2011 Google Inc. All Rights Reserved."
    },
    {
      "name": "Roboto",
      "style": "normal",
      "weight": 400,
      "filename": "Roboto-Regular.ttf",
      "postScriptName": "Roboto-Regular",
      "fullName": "Roboto",
      "copyright": "Copyright 2011 Google Inc. All Rights Reserved."
    },
    {
      "name": "Roboto",
      "style": "italic",
      "weight": 400,
      "filename": "Roboto-Italic.ttf",
      "postScriptName": "Roboto-Italic",
      "fullName": "Roboto Italic",
      "copyright": "Copyright 2011 Google Inc. All Rights Reserved."
    },
    {
      "name": "Roboto",
      "style": "normal",
      "weight": 500,
      "filename": "Roboto-Medium.ttf",
      "postScriptName": "Roboto-Medium",
      "fullName": "Roboto Medium",
      "copyright": "Copyright 2011 Google Inc. All Rights Reserved."
    },
    {
      "name": "Roboto",
      "style": "italic",
      "weight": 500,
      "filename": "Roboto-MediumItalic.ttf",
      "postScriptName": "Roboto-MediumItalic",
      "fullName": "Roboto Medium Italic",
      "copyright": "Copyright 2011 Google Inc. All Rights Reserved."
    },
    {
      "name": "Roboto",
      "style": "normal",
      "weight": 700,
      "filename": "Roboto-Bold.ttf",
      "postScriptName": "Roboto-Bold",
      "fullName": "Roboto Bold",
      "copyright": "Copyright 2011 Google Inc. All Rights Reserved."
    },
    {
      "name": "Roboto",
      "style": "italic",
      "weight": 700,
      "filename": "Roboto-BoldItalic.ttf",
      "postScriptName": "Roboto-BoldItalic",
      "fullName": "Roboto Bold Italic",
      "copyright": "Copyright 2011 Google Inc. All Rights Reserved."
    },
    {
      "name": "Roboto",
      "style": "normal",
      "weight": 900,
      "filename": "Roboto-Black.ttf",
      "postScriptName": "Roboto-Black",
      "fullName": "Roboto Black",
      "copyright": "Copyright 2011 Google Inc. All Rights Reserved."
    },
    {
      "name": "Roboto",
      "style": "italic",
      "weight": 900,
      "filename": "Roboto-BlackItalic.ttf",
      "postScriptName": "Roboto-BlackItalic",
      "fullName": "Roboto Black Italic",
      "copyright": "Copyright 2011 Google Inc. All Rights Reserved."
    }
  ],
  "subsets": [
    "cyrillic",
    "cyrillic-ext",
    "greek",
    "greek-ext",
    "latin",
    "latin-ext",
    "menu",
    "vietnamese"
  ],
  "dateAdded": "2013-01-09"
}

相关问题