Я использую компоненты из Native Base в своем приложении expo, но ошибка шрифта снова раздражает n снова. Пожалуйста, предоставьте мне решение в соответствии с моим кодом, чтобы избавиться от этого. Заранее спасибо
Ошибка
Вы начали загружать шрифт «Roboto_medium», но использовали его до того, как он загрузился.
Перед использованием шрифта необходимо дождаться завершения Font.loadAsync.
Мы рекомендуем загрузить все шрифты перед рендерингом приложения и рендерить только Expo.AppLoading в ожидании завершения загрузки.
- node_modules \ react-native \ Libraries \ YellowBox \ YellowBox.js: 59: 8 по ошибке
- node_modules \ expo \ build \ environment \ muteWarnings.fx.js: 27:24 по ошибке
- ... еще 24 кадра стека из внутреннего устройства фреймворка
App.js
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginScreen from './src/screens/LoginScreen';
const AppNavigator = createStackNavigator({
Login: {
screen: LoginScreen,
navigationOptions: {
header: null
}
},
});
export default createAppContainer(AppNavigator);
LoginScreen.js
import React, { Component } from 'react';
import { View, StyleSheet, ImageBackground, Image, KeyboardAvoidingView } from 'react-native';
import { Text, Container, Header, Content, Input, Item, Button, Toast, Root } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';
export default class LoginScreen extends Component {
constructor() {
super()
this.state = {
email: '',
password: '',
showToast: false
}
}
async componentWillMount() {
await Font.loadAsync({
'Roboto': require('../../node_modules/native-base/Fonts/Roboto.ttf'),
'Roboto_medium': require('../../node_modules/native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
})
}
onSubmit(ref) {
Toast.show({
text: "Username & Password are mandatory.",
type: 'warning',
textStyle: { fontSize: 14, alignSelf: 'center' },
})
}
render() {
return (
<Root>
<ImageBackground
source={require('../images/login-bg.jpg')}
style={styles.container}
>
<KeyboardAvoidingView behavior="padding" enabled>
<View style={styles.loginContaner}>
<Image source={require('../images/MMC-logo.png')} style={styles.logo} />
<Item regular style={styles.loginInputItem}>
<Input
placeholder='Email'
placeholderTextColor="#555"
style={styles.loginInput}
autoCapitalize="none"
autoCorrect={false}
value={this.state.email}
onChangeText={(val) => this.setState({ email: val })}
/>
</Item>
<Item regular style={styles.inputPassword}>
<Input
autoCapitalize="none"
placeholder='Password'
secureTextEntry
placeholderTextColor="#555"
style={styles.loginInput}
value={this.state.password}
onChangeText={(val) => this.setState({ password: val })}
/>
</Item>
<Button block style={styles.button} onPress={() => this.onSubmit(this)}>
<Text>LOGIN</Text>
</Button>
</View>
</KeyboardAvoidingView>
</ImageBackground>
</Root>
);
}
}
Package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "^35.0.0",
"native-base": "^2.13.8",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"react-native-gesture-handler": "~1.3.0",
"react-native-reanimated": "~1.2.0",
"react-native-web": "^0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",
"expo-font": "~7.0.0"
},
"devDependencies": {
"babel-preset-expo": "^7.1.0"
},
"private": true
}