Я новичок в React Native. Я хотел бы добавить в нижнем колонтитуле в моем приложении. Вот мой полный код в файле dashboard.js, но он не работает:

import React, { memo } from 'react'; import Background from '../components/Background'; import Logo from '../components/Logo'; import Header from '../components/Header'; import Paragraph from '../components/Paragraph'; import Button from '../components/Button'; import {Container, Footer, Title, Icon} from 'native-base'; const Dashboard = ({ navigation }) ={amp}gt; ( {amp}lt;Background{amp}gt; {amp}lt;Logo /{amp}gt; {amp}lt;Header{amp}gt;Let's start{amp}lt;/Header{amp}gt; {amp}lt;Paragraph{amp}gt; Your amazing app starts here. Open you favourite code editor and start editing this project. {amp}lt;/Paragraph{amp}gt; {amp}lt;Button mode="outlined" onPress={() ={amp}gt; navigation.navigate('HomeScreen')}{amp}gt; Logout {amp}lt;/Button{amp}gt; **{amp}lt;Container{amp}gt; {amp}lt;Footer{amp}gt; {amp}lt;Button transparent{amp}gt; {amp}lt;Icon size={30} color={'#fff'} name={'ios-telephone'} /{amp}gt; {amp}lt;/Button{amp}gt; {amp}lt;Title{amp}gt;Footer{amp}lt;/Title{amp}gt; {amp}lt;Button transparent {amp}gt; {amp}lt;Icon size={25} color={'#fff'} name={'chatbox'}/{amp}gt; {amp}lt;/Button{amp}gt; {amp}lt;/Footer{amp}gt; {amp}lt;/Container{amp}gt;** {amp}lt;/Background{amp}gt; ); export default memo(Dashboard); 

Ошибка показывает, что проблема fontfamily вызвана в native-base.

введите описание изображения здесь

Поэтому я провел некоторые исследования и получил это решение.

 async componentDidMount() { await Font.loadAsync({ Roboto: require('native-base/Fonts/Roboto.ttf'), Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'), ...Ionicons.font, }); this.setState({ isReady: true }); } 

Но я понятия не имею, как добавить это в мой код, кто-нибудь может помочь в этом? Оценил.

Сначала вам нужно сохранить исходное состояние как ложное, пока данные не будут загружены

 state = { isReady: false } 

Затем внутри componentDidMount вы можете загрузить данные, а когда данные загружены, изменить состояние.

 async componentDidMount() { try { await Font.loadAsync({ Roboto: require('native-base/Fonts/Roboto.ttf'), Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'), ...Ionicons.font, }); this.setState({ isReady: true }) } catch (error) { console.log('error loading fonts', error); } } 

Наконец, просмотрите ваши данные

 render() { return ( {amp}lt;View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}{amp}gt; { this.state.isReady ? {amp}lt;Text style={{ fontFamily: 'Roboto', fontSize: 56 }}{amp}gt;Hello, world!{amp}lt;/Text{amp}gt; : {amp}lt;View style={{ flex: 1, padding: 20 }}{amp}gt; {amp}lt;ActivityIndicator /{amp}gt; {amp}lt;/View{amp}gt; } {amp}lt;/View{amp}gt; ) } 

Вы можете применить тот же сценарий для функционального компонента, но использовать useEffect () вместо componentDidMount ()