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

Question

ネイティブベースを使用すると、エラー：You started loading 'Roboto_medium', but used it before it finished loadingが表示されます。

私は公式ページの指示に従ってきました。

反応するネイティブアプリを作成するには、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> 
); 
} 
} 

Answer 1

。このようなことができます

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> 
    ); 
    } 
}