Expo React Native загружает пользовательский шрифт только один раз - PullRequest
Новая
       5

Expo React Native загружает пользовательский шрифт только один раз

0 голосов
/ 19 июня 2020

каждому. Я здесь новенький. Я использую Expo для создания собственного приложения для реагирования. Я хочу внедрить пользовательские шрифты в свой проект. Итак, я просмотрел документы: https://docs.expo.io/guides/using-custom-fonts

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

Вот мой код,

Приложение. js

import React from "react";
import {
  StyleSheet,
  SafeAreaView,
  Image,
  StatusBar,
  Platform,
  Text
} from "react-native";


import WelcomeScreen from "./app/screen/WelcomeScreen";
//import ViewImageScreen from "./app/screen/ViewImageScreen";

import {
  useFonts,
  Poppins_300Light,
  Poppins_400Regular,
  Poppins_400Regular_Italic,
  Poppins_500Medium,
  Poppins_700Bold,
  Poppins_900Black,
} from "@expo-google-fonts/poppins";
import { AppLoading } from "expo";

export default function App() {

  let [fontsLoaded] = useFonts({
    "Shamim-Bn": require(
      './app/assets/Shamim-Font-Bn.ttf'
    ),
    "Poppins-Light": Poppins_300Light,
    "Poppins-Regular": Poppins_400Regular,
    "Poppins-Regular-Italic": Poppins_400Regular_Italic,
    "Poppins-Medium": Poppins_500Medium,
    "Poppins-Bold": Poppins_700Bold,
    "Poppins-Black": Poppins_900Black,
  });

  if(fontsLoaded){
    return (
      <SafeAreaView style={styles.container}>
        // Only this components gets Custom font
        <Text style={styles.custom}>পছন্দের ঘর এখন এখানেই...</Text> 
        <WelcomeScreen />
      </SafeAreaView>
    )
  } else{
    return(
      <AppLoading />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    justifyContent: "center",
    alignItems: "center",
  },
  custom:{
    fontFamily: 'Shamim-Bn',
    fontSize: 20,
  }
});

Экран приветствия. js

import React from 'react';
import {StyleSheet, ImageBackground, View, Image, Text} from 'react-native';

import colors from '../config/colors';


function WelcomeScreen(){
    return(
        <ImageBackground
        style={styles.background}
        source={require('../assets/welcome-bg.png')}>
            <View style={styles.logoBox}>
                <Image style={styles.logo} source={require('../assets/logo.png')} />
                <Text style={styles.tagline}>পছন্দের ঘর এখন এখানেই...</Text>
            </View>
            <View style={styles.loginBtn}></View>
            <View style={styles.signupBtn}></View>
        </ImageBackground>
    )
}
//
const styles = StyleSheet.create({
    background: {
        flex: 1,
        alignItems: "center",
        justifyContent: "flex-end"
    },
    logoBox: {
        position: "absolute",
        top: 80,
        alignItems: "center"
    },
    logo: {
        width: 240,
        height: 120,
    },
    tagline:{
        marginTop: 10,
        fontSize: 19,
        fontWeight: "700",
        color: colors.sub,
        fontFamily: 'Shamim-Bn',
    },
    loginBtn:{
        backgroundColor:  colors.main,
        width: "100%",
        height: 70
    },
    signupBtn:{
        backgroundColor: colors.sub,
        width: "100%",
        height: 70
    }
});

export default WelcomeScreen;

Изменить:

Что более важно, представление, объявленное только в App. js получает настраиваемый шрифт. Вид вроде WelcomeScreen. js, я импортирую в приложение. js не получает пользовательских шрифтов. Пожалуйста, помогите.

1 Ответ

0 голосов
/ 22 июня 2020

Я решил эту проблему. Если вы установите свойство fontWeight вместе с настраиваемым шрифтом в объявлении стилей, компоненты <Text> отображают шрифты по умолчанию, доступные на устройстве. Единственный способ использовать разные варианты шрифтов, импортировав и объявив варианты шрифтов следующим образом: 

let [fontsLoaded] = useFonts({
    "Shamim-Bn": require(
      './app/assets/Shamim-Font-Bn.ttf'
    ),
    "Poppins-Light": Poppins_300Light,
    "Poppins-Regular": Poppins_400Regular,
    "Poppins-Regular-Italic": Poppins_400Regular_Italic,
    "Poppins-Medium": Poppins_500Medium,
    "Poppins-Bold": Poppins_700Bold,
    "Poppins-Black": Poppins_900Black,
  });

Позже установите для свойства fonFamily значение Poppins-Regular или Poppins-Bold.

Опять же, не используйте с ним свойство fontWeight.

...