Question

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

fontFamily'Arial'不是系统字体，尚未加载   通过Expo.Font.loadAsync。   -node_modules \ react-native \ Libraries \ Renderer \ ReactNativeRenderer-dev.js：3382：38   在diffProperties中   -如果要使用系统字体，请确保输入正确的名称，并且设备操作系统支持该名称。


如果这是自定义字体，请确保使用Expo.Font.loadAsync加载它。

processFontFamily中的node_modules \ expo \ src \ Font.js：34：10

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

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

1 个答案: