android - fontFamily 'Arial' 不是使用 react-native-textinput-effects 的系统字体
问题描述
使用 react-native-textinput-effects 时出现错误。这是我的错误信息:
fontFamily 'Arial' 不是系统字体,尚未通过 Expo.Font.loadAsync 加载。- diffProperties 中的 node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:3382:38 - 如果您打算使用系统字体,请确保您输入了正确的名称并且您的设备操作系统支持该名称。
- 如果这是自定义字体,请务必使用 Expo.Font.loadAsync 加载它。
- node_modules\expo\src\Font.js:34:10 在 processFontFamily
- diffProperties 中的 node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:3382:38
- ... 来自框架内部的 30 多个堆栈帧
这是我的代码:
import React, { Component } from 'react'
import { StyleSheet, View, Text, TextInput, Image, TouchableOpacity } from 'react-native'
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Font } from "expo";
import { Fumi} from 'react-native-textinput-effects';
class Login extends React.Component {
render() {
return (
<View style={styles.main_container}>
<View style={styles.subview_container}>
<View style={[styles.card2, { backgroundColor: '#a9ceca' }]}>
<Text style={styles.title}>Fumi</Text>
<Fumi
label={'Course Name'}
labelStyle={{ color: '#a3a3a3' }}
inputStyle={{ color: '#f95a25' }}
iconClass={FontAwesomeIcon}
iconName={'university'}
iconColor={'#f95a25'}
iconSize={15}
/>
<Fumi
style={styles.input}
label={'Degree'}
iconClass={FontAwesomeIcon}
iconName={'graduation-cap'}
iconColor={'#77116a'}
/>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderColor: '#555500',
},
subview_container: {
},
card2: {
padding: 16,
},
input: {
marginTop: 4,
},
title: {
paddingBottom: 16,
textAlign: 'center',
color: '#404d5b',
fontSize: 20,
fontWeight: 'bold',
opacity: 0.8,
}
})
export default Login
我尝试使用此代码加载 Arial 字体但没有成功:
componentDidMount() {
Font.loadAsync({
'Arial': require('./assets/fonts/Arial.ttf'),
});
}
你能帮助我吗?
解决方案
检查一下,它是 app.js 的正常工作代码,只需适应您的情况
import React from "react";
import { AppLoading, Font } from "expo";
import { StyleSheet, Text, View } from "react-native";
export default class App extends React.Component {
state = {
loaded: false,
};
componentWillMount() {
this._loadAssetsAsync();
}
_loadAssetsAsync = async () => {
await Font.loadAsync({
diplomata: require("./assets/fonts/DiplomataSC-Regular.ttf"),
});
this.setState({ loaded: true });
};
render() {
if (!this.state.loaded) {
return <AppLoading />;
}
return (
<View style={styles.container}>
<Text style={styles.info}>
Look, you can load this font! Now the question is, should you use it?
Probably not. But you can load any font.
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
padding: 30,
},
info: {
fontFamily: "diplomata",
textAlign: "center",
fontSize: 14,
},
});
推荐阅读
- url - 将域重定向到 URL
- python - 如何使用 Selenium 处理 Google Authenticator
- amazon-web-services - AWS CodePipeline:同时运行多个管道
- python - dataFrame重复提取行
- python - python将字符串解析为csv格式
- json - Flutter - 解析 Json 的最佳方法是什么?
- python - TensorFlow函数检查一个值是否在给定范围内?
- python - Python RPG 混乱
- search - 如何创建一个简单的谷歌地图地址搜索并在颤振中自动完成并获取纬度和经度?
- java - 您可以使用 RetryTemplate 重试 AssertionError 吗?