Использование пользовательских шрифтов и кнопки со значками с помощью react-native-paper

!! Новичок в React Native и RN Paper.

Я пытаюсь использовать элементы React Native Paper, такие как Button и TextInput. Я закодировал кнопку, как показано ниже,

<Button
  icon="camera"
  mode="contained"
  loading="true"
  style={styles.button}
  contentStyle={{
    height: 50,
    backgroundColor: "#2196f3",
  }}
  labelStyle={{
    fontFamily: "Raleway-Bold",
    fontSize: 15,
  }}
>
  Login button
</Button>

С помощью этого кода я смог получить кнопку со значком Камера.

Но проблема началась, когда я начал загружать свои собственные шрифты с помощью Font.loadAsync для загрузки пользовательских шрифтов (Raleway-Bold).

import { Button, TextInput } from "react-native-paper";

import {
  View,
  TouchableWithoutFeedback,
  Keyboard,
  TouchableOpacity,
} from "react-native";

const Login = () => {
  return (
        <View >
            <Button
              icon="camera"
              mode="contained"
              loading="true"
            >
              Login button
            </Button>
          </TouchableOpacity>
        </View>
  );
};

export default Login;

В app.js я загрузил пользовательские шрифты, используя

Font.loadAsync({"Raleway-Bold": require("./assets/fonts/Raleway-SemiBold.ttf")})

После этого я получаю такие ошибки, как,

fontFamily Material Design Icons не является системным шрифтом и не загружается через Font.loadAsync.

  • Если вы намеревались использовать системный шрифт, убедитесь, что вы правильно ввели имя и что оно поддерживается операционной системой вашего устройства.

  • Если это пользовательский шрифт, обязательно загрузите его с помощью Font.loadAsync.

Кто-нибудь сталкивался с подобными проблемами?

Примечание. Используется последняя версия expo.

Спасибо заранее за ваше время.


react-native expo react-native-paper
person Raja    schedule 05.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Импортировать AppLoading & expo-font:

import { AppLoading } from 'expo'
import * as Font from 'expo-font'

Написать функцию FetchFonts:

const fetchFonts = () => {
    return Font.loadAsync({
    montregular: require('../../../assets/fonts/Montserrat-Regular.ttf'),
    montsemibold: require('../../../assets/fonts/Montserrat-SemiBold.ttf'),
    montbold: require('../../../assets/fonts/Montserrat-Bold.ttf')
    });
}

Добавьте флаг своему штату:

const [fontsLoaded, setFontsLoaded] = useState(false);

В вашем методе рендеринга рендеринг условно:

if(!fontsLoaded) return (   
        <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setFontsLoaded(true)}
      />
  );
else return (
<View>
   Your screen code.....
</View
);
person Ido Levi    schedule 16.01.2021