Избавьтесь от родного шрифта BaseFamily Roboto_medium не является системной ошибкой

Я использую компоненты из 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
}

person ZaIn KhAn    schedule 16.11.2019    source источник


Ответы (2)


Я столкнулся с той же проблемой, и то, что я делаю, - это импорт текста из react-native, а не из native-base, и это решило мою проблему.

Попробуйте удалить из импорта {Text} из 'native-base' и поместите его в 'react-native'.

person Shashank Dubey    schedule 21.02.2020

У меня была такая же проблема с запуском приложения с expo, и она была решена следующим комментарием на собственном базовом сайте: NativeBase использует некоторые пользовательские шрифты, которые можно загрузить с помощью Font.loadAsync. Пожалуйста, проверьте следующий адрес: https://www.npmjs.com/package/native-base

person Ahmad Sadegh    schedule 14.07.2020