摆脱 Native Base fontFamily “Roboto_medium” 不是系统...错误答案

【问题标题】：Get Rid from Native Base fontFamily "Roboto_medium" is not a system... Error摆脱 Native Base fontFamily “Roboto_medium” 不是系统...错误
【发布时间】：2019-11-16 14:53:44
【问题描述】：

我在我的 expo 应用程序中使用来自 Native Base 的组件，但字体错误再次令人恼火。请根据我的代码为我提供解决方案以摆脱这种情况。提前致谢

错误

您开始加载字体“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>
        );
    }
}

包.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
}

【问题讨论】：

标签： react-native expo native-base

【解决方案1】：

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

尝试从 import {Text} from 'native-base' 中删除并将其放入 'react-native'。

【讨论】：

【解决方案2】：

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

【讨论】：