加载字体本机错误

时间:2017-11-15 13:23:52

标签: reactjs react-native native-base

我在使用原生基础时收到错误:You started loading 'Roboto_medium', but used it before it finished loading

enter image description here

我按照官方页面中的说明进行操作。

要创建反应原生应用,我正在使用create-react-native-app

App.js

export default class App extends React.Component {

async componentWillMount() {
  await Expo.Font.loadAsync({
  'Roboto': require('native-base/Fonts/Roboto.ttf'),
  'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
  'Ionicons': require('@expo/vector-icons/fonts/Ionicons.ttf'),
 });
}

 render() {
   return (
    <Container>
      <StatusBar hidden={true} />

    <Button>
      <Text>
        Button
      </Text>
    </Button>

    <ListaItens />
    </Container>
  );
}
} 

6 个答案:

答案 0 :(得分:48)

你需要等到字体加载完毕。你可以做这样的事情

import React from "react";
import { StatusBar } from "react-native";
import { Container, Button, text, ListItem, Text } from "native-base";
import Expo from "expo";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { loading: true };
  }

  async componentWillMount() {
    await Expo.Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf"),
    });
    this.setState({ loading: false });
  }

  render() {
    if (this.state.loading) {
      return <Expo.AppLoading />;
    }
    return (
      <Container>
        <StatusBar hidden={true} />

        <Button>
          <Text>Button</Text>
        </Button>

        <ListItem />
      </Container>
    );
  }
}

答案 1 :(得分:2)

如果有人遇到'MaterialIcons'字体系列的这个问题,我遇到了类似的问题,发现这个解决方案有效:

https://javascriptrambling.blogspot.com.au/2018/03/expo-icon-fonts-with-react-native-and.html

你基本上需要:

  1. 安装字体(使用npm install)
  2. 对componentWillMount()函数中的字体执行Font.loadAsync。
  3. 请记住将componentWillMount()函数标记为async
  4. 根据“已加载”标志的状态有条件地显示为“正在加载”或视图。
  5. 例如:

    import React from 'react';
    import { View } from 'react-native';
    import { Avatar } from 'react-native-elements';
    import { AppLoading, Font } from 'expo';
    
    import FontAwesome  
      from './node_modules/@expo/vector-icons/fonts/FontAwesome.ttf';
    
    import MaterialIcons  
      from './node_modules/@expo/vector-icons/fonts/MaterialIcons.ttf';
    
    
    export default class App extends React.Component {
      state = {
        fontLoaded: false
      };
    
      async componentWillMount() {
        try {
          await Font.loadAsync({
            FontAwesome,
            MaterialIcons
          });
          this.setState({ fontLoaded: true });
        } catch (error) {
          console.log('error loading icon fonts', error);
        }
      }
    
      render() {
        if (!this.state.fontLoaded) {
          return <AppLoading />;
        }
    
        return (
          <View>
            <Text>My App</Text>
            <Avatar
              small
              rounded
              icon={{ name: 'add' }}
            /> 
          </View>
        );
      }
    }
    

答案 2 :(得分:2)

Expo SDK 35的新代码已从@akhil xavier的答案中修改

首先安装expo-font

app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "Admin",
                template: "{area:exists}/{controller=Admin}/{action=Index}/{id?}");
...

这是App.js

expo install 'expo-font'

答案 3 :(得分:0)

您必须去node_modules / yourPlugin / index.js找到fontFamily并将其删除

答案 4 :(得分:0)

适用于我的解决方案如下。我遇到的错误是我将Font导入为(Fonts),但是在调用它时却没有注意到's'。通过确保导入名称与您称为loadAsync的名称相似来对其进行修复。您需要在项目中安装“ expo-font”,它才能正常工作

import React from "react";
import * as Font from "expo-font";
import { AppLoading } from "expo";
import MealsNavigator from "./navigation/MealsNavigator";


const fetchFonts = () => {
  return Font.loadAsync({
    "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
    "open-sans-bold": require("./assets/fonts/OpenSans-Bold.ttf")
  });
};

export default function App() {
  const [fontLoaded, setFontLoaded] = useState(false);
  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setFontLoaded(true)}
        onError={err => console.log(err)}
      />
    );
  }
  return <MealsNavigator />;
}

答案 5 :(得分:-1)

它必须加载字体的一个原因是因为您使用的是Native Base Text组件。如果导入React Native Text组件,则您甚至不必加载字体,也不会看到该错误。