task 3801 stage 1

Этот сайт лучше всего просматривать в современном браузере с включённым JavaScript.

task 3801 stage 1

salton

Результат поверки:

сам код:

import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';
import * as Font from 'expo-font';

export default function App() {

  const styles = StyleSheet.create({
    textStyle: {
      marginTop:50,
      fontFamily: 'Roboto-Bold'
    }

  })

  let customFonts = {
    'fonticons': require('./src/assets/fonts/fontIcon/fonticons.ttf'),
    'Roboto-Medium': require('./src/assets/fonts/Roboto/Roboto-Medium.ttf'),
    'Roboto-Regular': require('./src/assets/fonts/Roboto/Roboto-Regular.ttf'),
    'Roboto-Bold': require('./src/assets/fonts/Roboto/Roboto-Bold.ttf'),
    'Roboto-Italic': require('./src/assets/fonts/Roboto/Roboto-Italic.ttf'),
}
  const [FontStatus, Loadfont] = useState(true)
  useEffect(() => {
    const loadFontsAsync = async () => {
      await Font.loadAsync(customFonts);
      Loadfont(false)
    }

    loadFontsAsync()
  }, [])

  if (FontStatus) {
    return (<View><ActivityIndicator size="small" color="#0000ff" /></View>);
  } else {
    return (
      <View>
        <Text style={styles.textStyle} >Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}

Ошибок во время сборки нет, в браузере в консоли тоже отсутствуют. Импортированные шрифты можно применить к тексту который ренедерится:

Также до рендеринга появляется импортированный значок лоадинга:

Подправьте пожалуйста тесты!

amati

salton починил, необходимо скачать задачу заново

salton

amati спасибо!
теперь проверка запускается. но есть еще вопросы.
вот результат проверки:

измененный код:

import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import * as Font from 'expo-font';

export default function App() {

  const [fontStatus, loadfont] = useState(false)

  useEffect(() => {
    const loadFontsAsync = async () => {
      await Font.loadAsync(
        {
          'fonticons': require('./src/assets/fonts/fontIcon/fonticons.ttf'),
          'RobotoBold': require('./src/assets/fonts/Roboto/Roboto-Bold.ttf'),
          'RobotoMedium': require('./src/assets/fonts/Roboto/Roboto-Medium.ttf'),
          'RobotoRegular': require('./src/assets/fonts/Roboto/Roboto-Regular.ttf'),
        }
      )
      loadfont(true)
    }
    loadFontsAsync()
  }, [])

  if (fontStatus === false) {
    return (<ActivityIndicator size="small" color="#0000ff" />);
  } else {
    return (
      <View>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}

визуально я наблюдаю отображение сначала отображение иконки загрузки, потом сообщение.

не понятно по пунктам:

"метод useEffect должен быть вызван один раз" - в коде видно, что useEffect в качестве второго аргумента передан пустой массив и в таком случае наш эффект будет выполнен единожды..
"метод useState должен быть вызван один раз с начальным значением false" - также в коде видно, что useState вызывается всего лишь раз.
"метод Font.loadAsync должен быть вызван с 4-мя шрифтами: fonticons, RobotoBold, RobotoMedium, RobotoRegular" - согласно документации (Font) вызываю этот метод. шрифты получаю и в процессе тестирования вижу сами шрифты и иконки
"После завершение загрузки шрифтов компонент App должен отобразить стандартное сообщение expo" - опять же в коде я сначала вывожу иконку (отображение которой принимает условие задачи), а потом уже "стандартное сообщение expo". я пробовал его выводить просто в текстовом поле, без блока <View>, пробовал просто выводить текст без <Text>. по разному, результат тот-же

salton

Так как все задачи кроме этой у меня пройдены - страдаю фигней - пытаюсь оптимизировать код.

По новому:

import React, { useState, useEffect } from 'react'
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native'
import * as Font from 'expo-font'
import fonticons from './src/assets/fonts/fontIcon/fonticons.ttf'
import RobotoBold from './src/assets/fonts/Roboto/Roboto-Bold.ttf'
import RobotoMedium from './src/assets/fonts/Roboto/Roboto-Medium.ttf'
import RobotoRegular from './src/assets/fonts/Roboto/Roboto-Regular.ttf'

export default function App() {

  const [fontLoaded, loadFont] = useState(false)

  useEffect(
    () => { 
    const loadFontsAsync = async () => {
      const data = await Font.loadAsync(
        {
          fonticons,
          RobotoBold,
          RobotoMedium,
          RobotoRegular,
        }
      )
      loadFont(data)
    };
    loadFontsAsync()
  }, [])

  if (fontLoaded === false) { 
    return (<ActivityIndicator size="small" color="#0000ff" />);
  } else {
    return (
      <View styles={styles.container}>
        <Text style={{ fontFamily: 'RobotoBold' }}>Open up App.js to start working on your app!</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

как видим - задачу я удалил, заново загрузил, переписал загрузку шрифтов через стандартный импорт вместо устаревшего require.

Собственно результат:

как видим не поменялся)))

Также пробовал грузить шрифты через хук useFonts от того же expo-font (в документации собственно так и написано -
)
Результат собственно ничем не отличается от использования Font.loadAsync - загрузка шрифтов происходит, шрифты я могу использовать при рендеринге компоненты.

Что еще пробовал?

выносил Font.loadAsync в отдельную функцию, которую потом вызывал в useEffect
переписывал вызов Font.loadAsync без использования асинхронной функции внутри useEffect
стрелял из космоса, лазером, по лягушкам

В итоге результат один - при рендеринге компонента я жду получения шрифтов и вывожу иконку лоадинга, получив шрифты вывожу текст и применяю к нему шрифты....

Как хотя бы начать решать задачу - я хз...

amati

salton починил, можете пробовать

salton

amati да, проверку прошел. второй этап доступен к выполнению, и вроде как получилось выполнить четверть пунктов.

salton

Спасибо, в течении часа проверю!