我试图在我的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>
)
}
我收到的错误是:
文件夹结构:
1条答案
按热度按时间oxf4rvwz1#
iOS需要
postScript
名称来标识字体。你需要用它的postScript名称重命名字体:示例:
下载Roboto字体系列变体及其各自的postScript名称-https://github.com/PolymerElements/font-roboto-local/tree/master/fonts/roboto
Roboto字体家族元数据: