fontFamily 'Arial' 不是使用 react-native-textinput-effects 的系统字体

Posted 2023-03-15

【中文标题】fontFamily \'Arial\' 不是使用 react-native-textinput-effects 的系统字体

【英文标题】：fontFamily 'Arial' is not a system font using react-native-textinput-effectsfontFamily 'Arial' 不是使用 react-native-textinput-effects 的系统字体

【发布时间】：2018-07-27 10:01:48

【问题描述】：

我在使用 react-native-textinput-effects 时出错。 这是我的错误信息：

fontFamily 'Arial' 不是系统字体，尚未加载 通过 Expo.Font.loadAsync。 - node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:3382:38 在差异属性中 - 如果您打算使用系统字体，请确保您输入的名称正确且受您的设备操作系统支持。

如果这是自定义字体，请务必使用 Expo.Font.loadAsync 加载它。 node_modules\expo\src\Font.js:34:10 in processFontFamily node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:3382:38 在 diffProperties 中 ...来自框架内部的另外 30 个堆栈帧

这是我的代码：

import React,  Component  from 'react'
import  StyleSheet, View, Text, TextInput, Image, TouchableOpacity  from 'react-native'
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import  Font  from "expo";

import   Fumi from 'react-native-textinput-effects';

class Login extends React.Component 

  render() 
    return (
      <View style=styles.main_container>
        <View style=styles.subview_container>

   <View style=[styles.card2,  backgroundColor: '#a9ceca' ]>
          <Text style=styles.title>Fumi</Text>
          <Fumi

            label='Course Name'
            labelStyle= color: '#a3a3a3' 
            inputStyle= color: '#f95a25' 
            iconClass=FontAwesomeIcon
            iconName='university'
            iconColor='#f95a25'
            iconSize=15
          />
          <Fumi
            style=styles.input
            label='Degree'
            iconClass=FontAwesomeIcon
            iconName='graduation-cap'
            iconColor='#77116a'
          />
        </View>



        </View>
      </View>
    )
  


const styles = StyleSheet.create(

  main_container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderColor: '#555500',
  ,
  subview_container: 

  ,
card2: 
   padding: 16,
 ,
 input: 
   marginTop: 4,
 ,
 title: 
   paddingBottom: 16,
   textAlign: 'center',
   color: '#404d5b',
   fontSize: 20,
   fontWeight: 'bold',
   opacity: 0.8,
 
)

export default Login

我尝试使用此代码加载 Arial 字体但没有成功：

 componentDidMount() 
    Font.loadAsync(
      'Arial': require('./assets/fonts/Arial.ttf'),
    );
  

你能帮帮我吗？

【问题讨论】：

查看这个问题：https://github.com/halilb/react-native-textinput-effects/issues/58

德克萨斯州。我删除 fontFamily: 'Arial',on Fumi.js

【参考方案1】：

检查一下，它是 app.js 的正常工作代码，只是适应你的情况

  import React from "react";
  import  AppLoading, Font  from "expo";
  import  StyleSheet, Text, View  from "react-native";

  export default class App extends React.Component 
     state = 
       loaded: false,
     ;

     componentWillMount() 
       this._loadAssetsAsync();
     

     _loadAssetsAsync = async () => 
       await Font.loadAsync(
         diplomata: require("./assets/fonts/DiplomataSC-Regular.ttf"),
       );
       this.setState( loaded: true );
     ;

     render() 
       if (!this.state.loaded) 
         return <AppLoading />;
       

     return (
      <View style=styles.container>
        <Text style=styles.info>
          Look, you can load this font! Now the question is, should you use it?
          Probably not. But you can load any font.
        </Text>
      </View>
      );
     
    

  const styles = StyleSheet.create(
       container: 
         flex: 1,
         backgroundColor: "#fff",
         alignItems: "center",
         justifyContent: "center",
         padding: 30,
       ,
       info: 
         fontFamily: "diplomata",
         textAlign: "center",
         fontSize: 14,
       ,
   );