Question

我在我的博览会应用程序中使用了Native Base的组件，但是字体错误再次激怒了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
}

Answer 1

我遇到了同样的问题，我要做的是从react-native而不是native-base导入Text，这解决了我的问题。

尝试从导入的{Text}中删除“ native-base”并将其放入“ react-native”中。

Answer 2

我在Expo上运行应用程序时遇到了相同的问题，并通过在本机Base站点中进行以下注释解决了： NativeBase使用一些可以使用Font.loadAsync加载的自定义字体。请检查以下地址： https://www.npmjs.com/package/native-base

从本机基础fontFamily摆脱掉“ Roboto_medium”不是系统...错误

2 个答案: