web-dev-qa-db-ja.com

フォントのネイティブベースの読み込みエラー

エラーが発生しています：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>
  );
}
}
reactjsreact-nativenative-base
23
Igor Martins

フォントがロードされるまで待つ必要があります。このようなことができます

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>
    );
  }
}
49
akhil xavier

「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（）関数を非同期としてマークすることを忘れないでください
  4. 条件付きでは、「ロード中」フラグの状態に応じて、「ロード中」またはビューとともに表示されます。

例えば：

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
Andre DiCioccio

node_modules/yourPlugin/index.jsに移動してfontFamilyを見つけて削除する必要があります

0
Naved Khan