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

Question

我在使用 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'),
    });
  }

你能帮帮我吗？

Answer 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,
       },
   });