[0.73.1] fontWeight not apply while using custom font
未关闭
还没有人认领这个 Issue。
Issue: Author Provided Repro
- 主要语言
- C++
- 星标
- 127k
- 派生
- 25.3k
- 平均合并
- 1 天 23 小时
- 30 天内合并 PR
- 4
描述
Description
I just tried to use custom font in my project template, and i realize when i want to use fontWeight as a reference of my custom font family it's not applicable, is it expected or am i doing something wrong while linking my custom font?
I'm expecting fontWeight should applicable with font as google fonts declared
- Thin 100
- Thin 100 Italic
- ExtraLight 200
- ...
Steps to reproduce
- Download font from google
- Extract downloaded font and copy font into project directory (without
ptprefix) - linking the fonts with react-native-asset
- Paste this code in
App.[js/tsx]
import React from 'react';
import { Text, View } from 'react-native';
const TextExample = props => {
const fontListRegularWithFontWeight = [
{fontFamily: 'DMSans-Regular', fontWeight: '100'},
{fontFamily: 'DMSans-Regular', fontWeight: '200'},
{fontFamily: 'DMSans-Regular', fontWeight: '300'},
{fontFamily: 'DMSans-Regular', fontWeight: '400'},
{fontFamily: 'DMSans-Regular', fontWeight: '500'},
{fontFamily: 'DMSans-Regular', fontWeight: '600'},
{fontFamily: 'DMSans-Regular', fontWeight: '700'},
{fontFamily: 'DMSans-Regular', fontWeight: '800'},
{fontFamily: 'DMSans-Regular', fontWeight: '900'},
];
const fontListWithCustomFontOnly = [
{fontFamily: 'DMSans-Thin'},
{fontFamily: 'DMSans-ExtraLight'},
{fontFamily: 'DMSans-Light'},
{fontFamily: 'DMSans-Regular'},
{fontFamily: 'DMSans-Medium'},
{fontFamily: 'DMSans-SemiBold'},
{fontFamily: 'DMSans-Bold'},
{fontFamily: 'DMSans-ExtraBold'},
{fontFamily: 'DMSans-Black'},
];
return (
<View style={{flex: 1}}>
<Text style={{textAlign: 'center'}}>Custom Font Regular with fontWeight</Text>
<View style={{borderWidth: 1, margin: 14, padding: 14, marginBottom: 24, alignItems: 'center'}}>
{fontListRegularWithFontWeight.map((x, i) => (
<Text key={x.fontFamily + i} style={x}>
{JSON.stringify(x)}
</Text>
))}
</View>
<Text style={{textAlign: 'center'}}>Custom Font With Exact Font Name</Text>
<View style={{borderWidth: 1, margin: 14, padding: 14, alignItems: 'center'}}>
{fontListWithCustomFontOnly.map((x, i) => (
<Text key={x.fontFamily + i} style={x}>
{JSON.stringify(x)}
</Text>
))}
</View>
</View>
);
};
export default TextExample;
React Native Version
0.73.1
Affected Platforms
Runtime - Android
Output of npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 12.5
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 679.42 MB / 16.00 GB
Shell:
version: 5.8.1
path: /bin/zsh
Binaries:
Node:
version: 18.19.0
path: /usr/local/bin/node
Yarn:
version: 1.22.19
path: ~/.yarn/bin/yarn
npm:
version: 10.2.3
path: /usr/local/bin/npm
Watchman:
version: 2023.12.04.00
path: /usr/local/bin/watchman
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms:
- DriverKit 21.4
- iOS 16.0
- macOS 12.3
- tvOS 16.0
- watchOS 9.0
Android SDK:
API Levels:
- "27"
- "28"
- "29"
- "30"
- "31"
- "33"
- "34"
Build Tools:
- 28.0.3
- 29.0.2
- 29.0.3
- 30.0.2
- 30.0.3
- 31.0.0
- 33.0.0
- 33.0.1
- 33.0.2
- 34.0.0
System Images:
- android-23 | Intel x86 Atom_64
- android-27 | Google APIs ARM 64 v8a
- android-28 | Google APIs Intel x86 Atom
- android-29 | Google APIs Intel x86 Atom
- android-30 | Google APIs Intel x86 Atom
- android-30 | Google Play ARM 64 v8a
- android-34 | Google APIs Intel x86_64 Atom
Android NDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10406996
Xcode:
version: 14.0.1/14A400
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.9
path: /usr/bin/javac
Ruby:
version: 2.7.4
path: /Users/administrator_1/.rvm/rubies/ruby-2.7.4/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.1
wanted: 0.73.1
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: false
### Stacktrace or Logs
```text
noneed
Reproducer
https://snack.expo.dev/w667bnl74
Screenshots and Videos
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从链接的 Snack 和 Android 0.73.1 上的 App.[js/tsx] 复现开始,检查两个 fontFamily/fontWeight 数组以及链接的 DM Sans 资源。将观察到的字重与预期的 100–900 映射进行比较;完成的标准是确定这是 React Native Android bug,还是字体链接或使用问题,并记录所需的修复或指导。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- android, javascript, react-native
- 领域
- mobile
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100