Ошибка загрузки шрифта при использовании компонента ShoutemUI/TextInput в среде Exponent, основанной на реакции

Я пытаюсь использовать hangem/ui с экспонентой и получаю сообщение об ошибке при использовании компонента textinput hangem/ui, где я получаю следующее сообщение об ошибке fontFamily Rubik is not a system font and has not been loaded through Exponent.Font.loadAsync

Однако я загрузил все пользовательские шрифты Shoutem, которые были перечислены в сообщении блога ="nofollow noreferrer">https://blog.getexponent.com/using-react-native-ui-toolkits-with-exponent-3993434caf66#.iyiwjpwgu

Использование метода Exponent.Font.loadAsync.

 fonts: [
          FontAwesome.font,
          {'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf')},
          {'Rubik-Black': require('./node_modules/@shoutem/ui/fonts/Rubik-Black.ttf')},
          {'Rubik-BlackItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BlackItalic.ttf')},
          {'Rubik-Bold': require('./node_modules/@shoutem/ui/fonts/Rubik-Bold.ttf')},
          {'Rubik-BoldItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BoldItalic.ttf')},
          {'Rubik-Italic': require('./node_modules/@shoutem/ui/fonts/Rubik-Italic.ttf')},
          {'Rubik-Light': require('./node_modules/@shoutem/ui/fonts/Rubik-Light.ttf')},
          {'Rubik-LightItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-LightItalic.ttf')},
          {'Rubik-Medium': require('./node_modules/@shoutem/ui/fonts/Rubik-Medium.ttf')},
          {'Rubik-MediumItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-MediumItalic.ttf')},
          {'Rubik-Regular': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf')},
          {'rubicon-icon-font': require('./node_modules/@shoutem/ui/fonts/rubicon-icon-font.ttf')},
        ],
      });

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


react-native shoutem exponentjs
person MonkeyBonkey    schedule 12.01.2017    source источник
comment
Для чего эти @ на путях?   -  person Eldelshell    schedule 13.01.2017
comment
Я вижу сейчас. Какое странное название пакета.   -  person Eldelshell    schedule 13.01.2017
comment
@Eldelshell, это пакеты npm с ограниченной областью действия, поэтому люди знают, что официально разработано Shoutem: docs.npmjs.com /разное/сфера   -  person Tommz    schedule 13.01.2017

Ответы (2)


arrow_upward
4
arrow_downward

В приведенном выше коде отсутствует одна строка. Попробуйте добавить эту строку в список массивов:

{'Rubik': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf')}
person Edward Tan    schedule 04.05.2017
comment
Да, это устранило все проблемы. - person Edward Tan; 24.05.2017

arrow_upward
0
arrow_downward

Используйте этот код по ссылке

import React, { Component } from 'react';
import { StatusBar } from 'react-native';
import { Font, AppLoading } from 'expo';
import { View, Examples } from '@shoutem/ui';

export default class App extends React.Component {
  state = {
    fontsAreLoaded: false,
  };

  async componentWillMount() {
    await Font.loadAsync({
      'Rubik': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf'),
      'Rubik-Black': require('./node_modules/@shoutem/ui/fonts/Rubik-Black.ttf'),
      'Rubik-BlackItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BlackItalic.ttf'),
      'Rubik-Bold': require('./node_modules/@shoutem/ui/fonts/Rubik-Bold.ttf'),
      'Rubik-BoldItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BoldItalic.ttf'),
      'Rubik-Italic': require('./node_modules/@shoutem/ui/fonts/Rubik-Italic.ttf'),
      'Rubik-Light': require('./node_modules/@shoutem/ui/fonts/Rubik-Light.ttf'),
      'Rubik-LightItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-LightItalic.ttf'),
      'Rubik-Medium': require('./node_modules/@shoutem/ui/fonts/Rubik-Medium.ttf'),
      'Rubik-MediumItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-MediumItalic.ttf'),
      'Rubik-Regular': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf'),
      'rubicon-icon-font': require('./node_modules/@shoutem/ui/fonts/rubicon-icon-font.ttf'),
    });

    this.setState({ fontsAreLoaded: true });
  }

  render() {
    if (!this.state.fontsAreLoaded) {
      return <AppLoading />;
    }

    return (
      <View styleName="flexible">
        <Examples />
        <StatusBar barStyle="default" hidden={false} />
      </View>
    );
  }
}
person Sanjay    schedule 05.01.2019