[英]Loading font native-base error
I'm getting the error: You started loading 'Roboto_medium', but used it before it finished loading
when using native base.我收到错误消息:
You started loading 'Roboto_medium', but used it before it finished loading
在使用本机基础时You started loading 'Roboto_medium', but used it before it finished loading
。
I've followed the instructions in the official page.我已按照官方页面中的说明进行操作。
To create react native app I'm using create-react-native-app
.要创建反应本机应用程序,我正在使用
create-react-native-app
。
App.js应用程序.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>
);
}
}
you need to wait till the fonts get loaded.您需要等到字体加载完毕。 You can do something like this
你可以做这样的事情
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>
);
}
}
This new code for expo SDK 35 which was modified from @akhil xavier 's answer expo SDK 35 的这个新代码是从@akhil xavier 的回答中修改的
First install expo-font首先安装expo-font
expo install 'expo-font'
here is the App.js这是 App.js
import React from "react";
import * as Font from "expo-font";
import { ActivityIndicator } from "react-native";
import { Root } from "native-base";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { loading: true };
}
async componentWillMount() {
await Font.loadAsync({
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
Ionicons: require("@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf"),
});
this.setState({ loading: false });
}
render() {
if (this.state.loading) {
return <ActivityIndicator />;
}
return (
<Root>
<RootPage /> // starter component (i.e. nav)
</Root>
);
}
}
The solution that works for me is below.对我有用的解决方案如下。 The error I had was that I imported Font as (Fonts) but while calling it failed to notice the 's'.
我遇到的错误是我将 Font 作为 (Fonts) 导入,但在调用它时没有注意到“s”。 Fixed it by making sure the import name is similar to what you call the loadAsync to.
通过确保导入名称与您调用 loadAsync 的名称相似来修复它。 You need to have 'expo-font' installed in your project for it to work
您需要在项目中安装“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 />;
}
If anyone is having this issue with the 'MaterialIcons' font family, I had a similar problem and found following this solution worked:如果有人在使用“MaterialIcons”字体系列时遇到此问题,我会遇到类似的问题,并发现遵循此解决方案有效:
https://javascriptrambling.blogspot.com.au/2018/03/expo-icon-fonts-with-react-native-and.html https://javascriptrambling.blogspot.com.au/2018/03/expo-icon-fonts-with-react-native-and.html
You basically need to:你基本上需要:
For example:例如:
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>
);
}
}
你必须去node_modules / yourPlugin / index.js找到fontFamily并删除它
One reason why it has to load font is because you are using the Native Base Text component.它必须加载字体的原因之一是因为您正在使用 Native Base Text 组件。 If you import the React Native Text component instead you won't even have to load fonts and you won't see that error.
如果您改为导入 React Native Text 组件,您甚至不必加载字体,也不会看到该错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.