字体不应用于样式，除非在React本机中重新加载
字体不应用于样式，除非在React本机中重新加载
提问于 2020-07-03 07:14:35
我正在使用global对象来存储字体名称(所以稍后我可以更改所有字体)，但是，除非我保存组件(并触发热重加载)，否则它们不会应用。经过实验，我发现global在开始时不存储值，所以热重新加载必须重新分配值给关闭的全局变量。
代码：
App.jsx
...
global.fontRegular = 'Montserrat-Regular';
global.fontSemiBold = 'Montserrat-SemiBold';
global.fontExtraBold = 'Montserrat-ExtraBold';
...HeaderTitle.jsx
import React from 'react';
import {Text, TouchableOpacity, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
text: {
fontSize: 24,
color: '#f1f1f1',
textAlign: 'center',
fontFamily: global.fontExtraBold,
margin: 10,
},
});
export default function () {
return (
<TouchableOpacity>
<Text style={styles.text}>SUPPORT.UA</Text>
</TouchableOpacity>
);
}热重装前筛
热装后筛
回答 2
Stack Overflow用户
发布于 2020-07-03 07:14:35
我发现，如果没有在导出体中使用global对象，则对封闭对象不起作用，所以原始代码将不工作，
但是，下面的一个将(现在我想知道这是如何工作的)：
import React from 'react';
import {Text, TouchableOpacity, StyleSheet} from 'react-native';
export default React.memo(function ({navigation, ...props}) {
const styles = StyleSheet.create({
text: {
fontSize: 24,
color: '#f1f1f1',
textAlign: 'center',
fontFamily: global.fontExtraBold,
margin: 10,
},
});
return (
<TouchableOpacity onPress={() => navigation.navigate('MainScreen')}>
<Text style={styles.text}>SUPPORT.UA</Text>
</TouchableOpacity>
);
});Stack Overflow用户
发布于 2020-07-03 11:06:04
您的const styles对象是在函数块之外声明的，因此在app启动时立即对其进行评估( global.yourFont尚未分配)。然而，分配给global是一种操作，是在对整个代码进行爬行和非作用域const的计算之后完成的。因此，将其移动到组件内部就可以解决问题，因为组件函数将在初始爬行之后被调用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62710284
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号