React Native - Expo: fontFamily 'SimpleLineIcons' не является системным шрифтом и не был загружен через Font.loadAsync
Итак, я получаю эту ошибку на устройстве / эмуляторе Android:
С другой стороны, на iOS он компилируется нормально, и simple-line-icons отображаются правильно.
У меня последняя версия expo.
Мой package.json:
{
"name": "FamScore3",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.14.0",
"jest-expo": "^31.0.0",
"react-test-renderer": "16.3.1"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@firebase/auth": "^0.7.6",
"@firebase/database": "^0.3.6",
"axios": "^0.18.0",
"metro-react-native-babel-preset": "^0.45.0",
"expo": "^31.0.4",
"firebase": "^5.5.1",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
"react-native-elements": "^0.19.1",
"react-native-material-dropdown": "^0.11.1",
"react-native-router-flux": "^4.0.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
}
}
Мой app.json:
{
"expo": {
"sdkVersion": "31.0.0"
}
}
Мой метод Font.loadAsync в App.js, как реализовано в документации:
export default class App extends Component {
state = {
fontLoaded: false
}
async componentDidMount() {
try {
await Font.loadAsync({
amaticBold: require('./assets/fonts/amaticSC-Bold.ttf'),
indieFlower: require('./assets/fonts/indieFlower.ttf'),
'Material Icons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
'simple-line-icons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf')
})
this.setState({ fontLoaded: true })
} catch (error) {
console.info('error loading fonts', error);
}
}
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk))
if (!this.state.fontLoaded) {
return <AppLoading />
}
return (
<Provider store = {store}>
<Router />
</Provider>
)
}
}
Заранее большое спасибо. Любая помощь приветствуется! Я застрял на какое-то время.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Итак, мне наконец удалось решить эту проблему.
Проблема заключалась в том, что iOS и Android, по-видимому, требуют разных имен для шрифтов, которые вы хотите загрузить.
Простые иконки, которые я загрузил, работали только для iOS, а на Android я получил эту ошибку: fontFamily 'SimpleLineIcons' не является системным шрифтом и не был загружен через Font.loadAsync.
В итоге я загрузил и простые иконки, и SimpleLineIcons, указывая на один и тот же каталог, например:
componentDidMount() {
this.loadAssetsAsync()
}
loadAssetsAsync = async () => {
await Font.loadAsync({
amaticBold: require('./assets/fonts/amaticSC-Bold.ttf'),
indieFlower: require('./assets/fonts/indieFlower.ttf'),
'Material Icons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
'MaterialIcons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
'SimpleLineIcons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf'),
'simple-line-icons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf')
})
this.setState({ fontLoaded: true })
}
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk))
if (!this.state.fontLoaded) {
return <AppLoading />
}
return (
<Provider store = {store}>
<Router />
</Provider>
)
}
Это, по общему признанию, уродливое решение на данный момент решило мою проблему. Убедитесь, что вы действительно набираете именно так, как вам подсказывает ошибка. Если ошибка: fontFamily MyAwesomeFont не является системным шрифтом ... Тогда вам действительно нужно назвать это:
Font.loadAsync({
'MyAwesomeFont': require('./path/to/MyAwesomeFont.ttf')
})
Надеюсь, это поможет кому-нибудь.
У меня была такая же проблема, и я обнаружил, что изменение имени шрифта на тот, который вы назвали, может решить проблему:
// Before
'my-awesome-font': require('./path/to/my-awesome-font.ttf')
// After
'MyAwesomeFont': require('./path/to/my-awesome-font.ttf')
Это может быть знак тире, который нельзя использовать.
У меня была та же проблема, и я потратил много времени на эту ошибку. Это 2021 год, и есть лучший способ сделать то же самое, поэтому вместо кода ниже
Font.loadAsync({
'MyAwesomeFont': require('./path/to/MyAwesomeFont.ttf')
})
Правильный способ сделать это
import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';
let [fontsLoaded] = useFonts({
'open-sans': require('./assets/fonts/OpenSans-Regular.ttf'),
'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
});
if (!fontsLoaded) {
return <AppLoading />;
}
Если вам нужны дополнительные объяснения, проверьте официальные документы здесь
Я столкнулся с этой ошибкой, когда использовал @ response-native-render-html, где он рендерил Html, сгенерированный из других cms, и это вызывает проблему семейства шрифтов, если создатель контента использовал собственный шрифт.
поэтому для решения этой проблемы я использовал функцию ignoredStyles в рендерере HTML, а затем установите baseFontStyle, чтобы текстовое содержимое выглядело одинаково.
код:
import HTML from "react-native-render-html"`
<HTML ignoredStyles = {['fontFamily']} baseFontStyle = {[fontFamily: 'nunito-regular', fontSize: 16]} />
Если вы пришли из "Сетевого ниндзя" Туто, вот решение.
Home.js
import React, { useState } from 'react';
import {StyleSheet, View, Text } from 'react-native';
export default function Home() {
return (
<View style = {styles.container}>
<Text style = {styles.titleText}>Home Screen</Text>
</View>
);
}
// https://docs.expo.dev/guides/using-custom-fonts/
const styles = StyleSheet.create({
container: {
padding: 24,
},
titleText:{
fontFamily: 'Nunito-Bold',
fontSize: 24,
}
})
App.js
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Home from './screens/home';
import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';
export default function App() {
// const [fontsLoaded, setFontsLoaded] = useState(false);
const [fontsLoaded] = useFonts({
'Nunito-Regular': require('./assets/fonts/Nunito-Regular.ttf'),
'Nunito-Bold': require('./assets/fonts/Nunito-Bold.ttf'),
});
if (!fontsLoaded) {
return (
<AppLoading />
)
} else {
return (
<Home />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});