React-native fontawesome某些图标未显示

时间：2018-08-13 12:39:09

标签： android react-native font-awesome

我刚刚添加了FontAwesome，而没有第三方tutorial 其主要工作原理，但所有图标中的某些（大约一半）只是空平方尺

那我在做什么错呢？ 还是FontAwesome仅在React-native中部分可用？

感谢您的提前帮助

编辑1：

我正在使用的代码：

import React, { Component } from 'react';
import { Text, View, Button, AsyncStorage, ScrollView } from 'react-native';
import styles from './../Styles/styles';

  render() {
   return (
    <ScrollView>
     <View style={styles.container}>

{...这里还有一些其他无关的东西...} 

      <Text style={{ fontFamily: 'fontawesome', fontSize: 16 }}>
        &#xf26e; &#xf368; &#xf369; &#xf2b9; &#xf2b9; &#xf2bb; &#xf2bb; &#xf042; &#xf170;
        &#xf36a; &#xf36b; &#xf5d0; &#xf36c; &#xf037; &#xf039; &#xf036; &#xf038; &#xf461;
        &#xf270; &#xf42c; &#xf0f9; &#xf2a3; &#xf36d; &#xf13d; &#xf17b; &#xf209; &#xf103;
        &#xf100; &#xf101; &#xf102; &#xf107; &#xf104; &#xf105; &#xf106; &#xf556; &#xf556;
        &#xf36e; &#xf420; &#xf36f; &#xf370; &#xf371; &#xf179; &#xf5d1; &#xf415; &#xf187;
        &#xf557; &#xf358; &#xf358; &#xf359; &#xf359; &#xf35a; &#xf35a; &#xf35b; &#xf35b;
        &#xf0ab; &#xf0a8; &#xf0a9; &#xf0aa; &#xf063; &#xf060; &#xf061; &#xf062; &#xf0b2;
        &#xf337; &#xf338; &#xf2a2; &#xf069; &#xf372; &#xf1fa; &#xf558; &#xf5d2; &#xf373;
        &#xf29e; &#xf41c; &#xf374; &#xf421; &#xf559; &#xf375; &#xf55a; &#xf04a; &#xf24e;
        &#xf05e; &#xf462; &#xf2d5; &#xf02a; &#xf0c9; &#xf433; &#xf434; &#xf2cd; &#xf244;
        &#xf240; &#xf242; &#xf243; &#xf241; &#xf236; &#xf0fc; &#xf1b4; &#xf1b5; &#xf0f3;
        &#xf0f3; &#xf1f6; &#xf1f6; &#xf55b; &#xf206; &#xf378; &#xf1e5; &#xf1fd; &#xf171;
        &#xf379; &#xf37a; &#xf27e; &#xf37b; &#xf517; &#xf29d; &#xf37c; &#xf37d; &#xf293;
        &#xf294; &#xf032; &#xf0e7; &#xf1e2; &#xf5d7; &#xf55c; &#xf02d; &#xf518; &#xf5da;
        &#xf02e; &#xf02e; &#xf436; &#xf466; &#xf49e; &#xf468; &#xf2a1; &#xf5dc; &#xf0b1;
        &#xf469; &#xf519; &#xf51a; &#xf55d; &#xf15a; &#xf188; &#xf1ad; &#xf1ad; &#xf0a1;
        &#xf140; &#xf46a; &#xf37f; &#xf207; &#xf55e; &#xf20d; &#xf1ec; &#xf133; &#xf133;
        &#xf073; &#xf073; &#xf274; &#xf274; &#xf272; &#xf272; &#xf271; &#xf271; &#xf273;
        &#xf273; &#xf030; &#xf083; &#xf55f; &#xf46b; &#xf1b9; &#xf5de; &#xf5df; &#xf5e1;
        &#xf5e4; &#xf0d7; &#xf0d9; &#xf0da; &#xf150; &#xf150; &#xf191; &#xf191; &#xf152;
        &#xf152; &#xf151; &#xf151; &#xf0d8; &#xf218; &#xf217; &#xf42d; &#xf1f3; &#xf416;
        &#xf24c; &#xf1f2; &#xf24b; &#xf1f1; &#xf1f4; &#xf1f5; &#xf1f0; &#xf380; &#xf0a3;
        &#xf51b; &#xf51c; &#xf5e7; &#xf1fe; &#xf080; &#xf080; &#xf201; &#xf200; &#xf00c;
        &#xf058; &#xf058; &#xf560; &#xf14a; &#xf14a; &#xf439; &#xf43a; &#xf43c; &#xf43f;
        &#xf441; &#xf443; &#xf445; &#xf447; &#xf13a; &#xf137; &#xf138; &#xf139; &#xf078;
        &#xf053; &#xf054; &#xf077; &#xf1ae; &#xf268; &#xf51d; &#xf111; &#xf111; &#xf1ce;
        &#xf328; &#xf328; &#xf46c; &#xf46d; &#xf017; &#xf017; &#xf24d; &#xf24d; &#xf20a;
        &#xf20a; &#xf0c2; &#xf381; &#xf382; &#xf383; &#xf384; &#xf385; &#xf561; &#xf121;
        &#xf126; &#xf1cb; &#xf284; &#xf0f4; &#xf013; &#xf085; &#xf51e; &#xf0db; &#xf075;
        &#xf075; &#xf27a; &#xf27a; &#xf4ad; &#xf4ad; &#xf4b3; &#xf086; &#xf086; &#xf51f;
        &#xf14e; &#xf14e; &#xf066; &#xf562; &#xf20e; &#xf26d; &#xf563; &#xf564; &#xf0c5;
        &#xf0c5; &#xf1f9; &#xf1f9; &#xf4b8; &#xf388; &#xf25e; &#xf4e7; &#xf4e8; &#xf4e9;
        &#xf4ea; &#xf4eb; &#xf4ec; &#xf4ed; &#xf4ee; &#xf4ef; &#xf4f0; &#xf4f1; &#xf4f2;
        &#xf09d; &#xf09d; &#xf125; &#xf565; &#xf05b; &#xf520; &#xf521; &#xf13c; &#xf38b;
        &#xf1b2; &#xf1b3; &#xf0c4; &#xf38c; &#xf38d; &#xf210; &#xf1c0; &#xf2a4; &#xf1a5;
        &#xf38e; &#xf38f; &#xf108; &#xf1bd; &#xf470; &#xf522; &#xf523; &#xf524; &#xf525;
        &#xf526; &#xf527; &#xf528; &#xf1a6; &#xf391; &#xf566; &#xf5eb; &#xf392; &#xf393;
        &#xf529; &#xf567; &#xf567; &#xf471; &#xf394; &#xf395; &#xf155; &#xf472; &#xf474;
        &#xf4b9; &#xf52a; &#xf52b; &#xf192; &#xf192; &#xf4ba; &#xf019; &#xf396; &#xf568;
        &#xf5ee; &#xf17d; &#xf397; &#xf16b; &#xf569; &#xf56a; &#xf1a9; &#xf44b; &#xf399;
        &#xf39a; &#xf4f4; &#xf282; &#xf044; &#xf044; &#xf052; &#xf430; &#xf141; &#xf142;
        &#xf5f1; &#xf423; &#xf1d1; &#xf0e0; &#xf0e0; &#xf2b6; &#xf2b6; &#xf199; &#xf299;
        &#xf52c; &#xf12d; &#xf39d; &#xf42e; &#xf2d7; &#xf153; &#xf362; &#xf12a; &#xf06a;
        &#xf071; &#xf065; &#xf31e; &#xf23e; &#xf35d; &#xf360; &#xf06e; &#xf06e; &#xf1fb;
        &#xf070; &#xf070; &#xf09a; &#xf39e; &#xf39f; &#xf082; &#xf049; &#xf050; &#xf1ac;
        &#xf52d; &#xf56b; &#xf182; &#xf0fb; &#xf15b; &#xf15b; &#xf15c; &#xf15c; &#xf1c6;
        &#xf1c6; &#xf1c7; &#xf1c7; &#xf1c9; &#xf1c9; &#xf56c; &#xf56d; &#xf1c3; &#xf1c3;
        &#xf56e; &#xf1c5; &#xf1c5; &#xf56f; &#xf570; &#xf571; &#xf477; &#xf478; &#xf1c1;
        &#xf1c1; &#xf1c4; &#xf1c4; &#xf572; &#xf573; &#xf574; &#xf1c8; &#xf1c8; &#xf1c2;
        &#xf1c2; &#xf575; &#xf576; &#xf008; &#xf0b0; &#xf577; &#xf06d; &#xf134; &#xf269;
        &#xf479; &#xf2b0; &#xf50a; &#xf3a1; &#xf578; &#xf024; &#xf024; &#xf11e; &#xf0c3;
        &#xf16e; &#xf44d; &#xf579; &#xf579; &#xf417; &#xf07b; &#xf07b; &#xf07c; &#xf07c;
        &#xf031; &#xf2b4; &#xf35c; &#xf425; &#xf280; &#xf3a2; &#xf44e; &#xf286; &#xf3a3;
        &#xf211; &#xf04e; &#xf180; &#xf2c5; &#xf3a4; &#xf52e; &#xf119; &#xf119; &#xf57a;
        &#xf57a; &#xf50b; &#xf1e3; &#xf1e3; &#xf50c; &#xf50d; &#xf11b; &#xf52f; &#xf0e3;
        &#xf3a5; &#xf3a5; &#xf22d; &#xf265; &#xf260; &#xf261; &#xf06b; &#xf1d3; &#xf1d2;
        &#xf09b; &#xf113; &#xf092; &#xf3a6; &#xf296; &#xf426; &#xf000; &#xf57b; &#xf530;
        &#xf2a5; &#xf2a6; &#xf0ac; &#xf57c; &#xf57d; &#xf57e; &#xf3a7; &#xf450; &#xf3a8;
        &#xf3a9; &#xf1a0; &#xf3aa; &#xf3ab; &#xf2b3; &#xf0d5; &#xf0d4; &#xf1ee; &#xf19d;
        &#xf184; &#xf2d6; &#xf531; &#xf532; &#xf57f; &#xf57f; &#xf580; &#xf580; &#xf581;
        &#xf581; &#xf582; &#xf582; &#xf583; &#xf583; &#xf584; &#xf584; &#xf585; &#xf585;
        &#xf586; &#xf586; &#xf587; &#xf587; &#xf588; &#xf588; &#xf589; &#xf589; &#xf58a;
        &#xf58a; &#xf58b; &#xf58b; &#xf58c; &#xf58c; &#xf58d; &#xf58e; &#xf3ac; &#xf3ad;
        &#xf3ae; &#xf0fd; &#xf1d4; &#xf3af; &#xf5f7; &#xf4bd; &#xf4be; &#xf4c0; &#xf258;
        &#xf258; &#xf256; &#xf256; &#xf25b; &#xf25b; &#xf0a7; &#xf0a7; &#xf0a5; &#xf0a5;
        &#xf0a4; &#xf0a4; &#xf0a6; &#xf0a6; &#xf25a; &#xf25a; &#xf255; &#xf255; &#xf257;
        &#xf257; &#xf259; &#xf259; &#xf4c2; &#xf4c4; &#xf2b5; &#xf2b5; &#xf292; &#xf0a0;
        &#xf0a0; &#xf1dc; &#xf025; &#xf58f; &#xf590; &#xf004; &#xf004; &#xf21e; &#xf533;
        &#xf591; &#xf452; &#xf3b0; &#xf1da; &#xf453; &#xf015; &#xf427; &#xf592; &#xf0f8;
        &#xf0f8; &#xf47d; &#xf47e; &#xf593; &#xf594; &#xf3b1; &#xf254; &#xf254; &#xf253;
        &#xf252; &#xf251; &#xf27c; &#xf13b; &#xf3b2; &#xf246; &#xf2c1; &#xf2c1; &#xf2c2;
        &#xf2c2; &#xf47f; &#xf03e; &#xf03e; &#xf302; &#xf302; &#xf2d8; &#xf01c; &#xf03c;
        &#xf275; &#xf534; &#xf129; &#xf05a; &#xf16d; &#xf26b; &#xf208; &#xf033; &#xf3b4;
        &#xf3b5; &#xf4e4; &#xf50e; &#xf3b6; &#xf3b7; &#xf595; &#xf1aa; &#xf3b8; &#xf3b9;
        &#xf1cc; &#xf5fa; &#xf084; &#xf4f5; &#xf11c; &#xf11c; &#xf3ba; &#xf3bb; &#xf3bc;
        &#xf596; &#xf596; &#xf597; &#xf597; &#xf598; &#xf598; &#xf535; &#xf42f; &#xf1ab;
        &#xf109; &#xf5fc; &#xf3bd; &#xf202; &#xf203; &#xf599; &#xf599; &#xf59a; &#xf59a;
        &#xf59b; &#xf59b; &#xf59c; &#xf59c; &#xf5fd; &#xf06c; &#xf212; &#xf094; &#xf094;
        &#xf41d; &#xf536; &#xf537; &#xf3be; &#xf3bf; &#xf1cd; &#xf1cd; &#xf0eb; &#xf0eb;
        &#xf3c0; &#xf0c1; &#xf08c; &#xf0e1; &#xf2b8; &#xf17c; &#xf195; &#xf03a; &#xf022;
        &#xf022; &#xf0cb; &#xf0ca; &#xf124; &#xf023; &#xf3c1; &#xf309; &#xf30a; &#xf30b;
        &#xf30c; &#xf2a8; &#xf59d; &#xf3c3; &#xf3c4; &#xf0d0; &#xf076; &#xf59e; &#xf183;
        &#xf50f; &#xf279; &#xf279; &#xf59f; &#xf5a0; &#xf041; &#xf3c5; &#xf276; &#xf277;
        &#xf60f; &#xf5a1; &#xf222; &#xf227; &#xf229; &#xf22b; &#xf22a; &#xf4f6; &#xf136;
        &#xf5a2; &#xf3c6; &#xf23a; &#xf3c7; &#xf0fa; &#xf3c8; &#xf2e0; &#xf5a3; &#xf11a;
        &#xf11a; &#xf5a4; &#xf5a4; &#xf5a5; &#xf5a5; &#xf538; &#xf223; &#xf2db; &#xf130;
        &#xf3c9; &#xf539; &#xf131; &#xf610; &#xf3ca; &#xf068; &#xf056; &#xf146; &#xf146;
        &#xf3cb; &#xf289; &#xf3cc; &#xf10b; &#xf3cd; &#xf285; &#xf3d0; &#xf0d6; &#xf3d1;
        &#xf3d1; &#xf53a; &#xf53b; &#xf53c; &#xf53d; &#xf5a6; &#xf186; &#xf186; &#xf5a7;
        &#xf21c; &#xf245; &#xf001; &#xf3d2; &#xf612; &#xf22c; &#xf1ea; &#xf1ea; &#xf5a8;
        &#xf418; &#xf419; &#xf3d3; &#xf53e; &#xf481; &#xf3d4; &#xf3d5; &#xf3d6; &#xf247;
        &#xf247; &#xf248; &#xf248; &#xf263; &#xf264; &#xf613; &#xf510; &#xf23d; &#xf19b;
        &#xf26a; &#xf23c; &#xf41a; &#xf03b; &#xf3d7; &#xf18c; &#xf1fc; &#xf5aa; &#xf53f;
        &#xf3d8; &#xf482; &#xf1d8; &#xf1d8; &#xf0c6; &#xf4cd; &#xf1dd; &#xf540; &#xf5ab;
        &#xf0ea; &#xf3d9; &#xf04c; &#xf28b; &#xf28b; &#xf1b0; &#xf1ed; &#xf304; &#xf305;
        &#xf5ac; &#xf5ad; &#xf14b; &#xf303; &#xf5ae; &#xf4ce; &#xf295; &#xf541; &#xf3da;
        &#xf3db; &#xf3dc; &#xf511; &#xf095; &#xf3dd; &#xf098; &#xf2a0; &#xf457; &#xf2ae;
        &#xf1a8; &#xf4e5; &#xf1a7; &#xf4d3; &#xf484; &#xf0d2; &#xf231; &#xf0d3; &#xf072;
        &#xf5af; &#xf5b0; &#xf04b; &#xf144; &#xf144; &#xf3df; &#xf1e6; &#xf067; &#xf055;
        &#xf0fe; &#xf0fe; &#xf2ce; &#xf2fe; &#xf619; &#xf3e0; &#xf154; &#xf011; &#xf5b1;
        &#xf485; &#xf486; &#xf02f; &#xf487; &#xf288; &#xf542; &#xf3e1; &#xf12e; &#xf3e2;
        &#xf1d6; &#xf029; &#xf128; &#xf059; &#xf059; &#xf458; &#xf459; &#xf2c4; &#xf10d;
        &#xf10e; &#xf4f7; &#xf074; &#xf2d9; &#xf41b; &#xf4d5; &#xf1d0; &#xf543; &#xf1b8;
        &#xf3e3; &#xf1a1; &#xf281; &#xf1a2; &#xf01e; &#xf2f9; &#xf25d; &#xf25d; &#xf3e4;
        &#xf18b; &#xf3e5; &#xf122; &#xf3e6; &#xf4f8; &#xf3e7; &#xf079; &#xf5b2; &#xf4d6;
        &#xf018; &#xf544; &#xf135; &#xf3e8; &#xf3e9; &#xf4d7; &#xf09e; &#xf143; &#xf158;
        &#xf545; &#xf546; &#xf547; &#xf548; &#xf156; &#xf5b3; &#xf5b3; &#xf5b4; &#xf5b4;
        &#xf267; &#xf41e; &#xf0c7; &#xf0c7; &#xf3ea; &#xf549; &#xf54a; &#xf28a; &#xf002;
        &#xf010; &#xf00e; &#xf3eb; &#xf4d8; &#xf2da; &#xf213; &#xf233; &#xf3ec; &#xf61f;
        &#xf064; &#xf1e0; &#xf1e1; &#xf14d; &#xf14d; &#xf20b; &#xf3ed; &#xf21a; &#xf48b;
        &#xf214; &#xf54b; &#xf290; &#xf291; &#xf07a; &#xf5b5; &#xf2cc; &#xf5b6; &#xf4d9;
        &#xf2f6; &#xf2a7; &#xf2f5; &#xf012; &#xf5b7; &#xf215; &#xf3ee; &#xf0e8; &#xf512;
        &#xf54c; &#xf216; &#xf17e; &#xf198; &#xf3ef; &#xf1de; &#xf1e7; &#xf118; &#xf118;
        &#xf5b8; &#xf5b8; &#xf4da; &#xf4da; &#xf48d; &#xf54d; &#xf2ab; &#xf2ac; &#xf2ad;
        &#xf2dc; &#xf2dc; &#xf5ba; &#xf0dc; &#xf15d; &#xf15e; &#xf160; &#xf161; &#xf0dd;
        &#xf162; &#xf163; &#xf0de; &#xf1be; &#xf5bb; &#xf197; &#xf3f3; &#xf110; &#xf5bc;
        &#xf1bc; &#xf5bd; &#xf0c8; &#xf0c8; &#xf45c; &#xf5be; &#xf18d; &#xf16c; &#xf5bf;
        &#xf005; &#xf005; &#xf089; &#xf089; &#xf5c0; &#xf621; &#xf3f5; &#xf1b6; &#xf1b7;
        &#xf3f6; &#xf048; &#xf051; &#xf0f1; &#xf3f7; &#xf249; &#xf249; &#xf04d; &#xf28d;
        &#xf28d; &#xf2f2; &#xf54e; &#xf54f; &#xf428; &#xf550; &#xf21d; &#xf0cc; &#xf429;
        &#xf42a; &#xf551; &#xf3f8; &#xf1a4; &#xf1a3; &#xf12c; &#xf239; &#xf0f2; &#xf5c1;
        &#xf185; &#xf185; &#xf2dd; &#xf12b; &#xf3f9; &#xf5c2; &#xf5c2; &#xf5c3; &#xf5c4;
        &#xf5c5; &#xf021; &#xf2f1; &#xf48e; &#xf0ce; &#xf45d; &#xf10a; &#xf3fa; &#xf490;
        &#xf3fd; &#xf02b; &#xf02c; &#xf4db; &#xf0ae; &#xf1ba; &#xf4f9; &#xf62e; &#xf62f;
        &#xf2c6; &#xf3fe; &#xf1d5; &#xf120; &#xf034; &#xf035; &#xf00a; &#xf009; &#xf00b;
        &#xf630; &#xf5c6; &#xf2b2; &#xf491; &#xf2cb; &#xf2c7; &#xf2c9; &#xf2ca; &#xf2c8;
        &#xf165; &#xf165; &#xf164; &#xf164; &#xf08d; &#xf3ff; &#xf00d; &#xf057; &#xf057;
        &#xf043; &#xf5c7; &#xf5c8; &#xf5c8; &#xf204; &#xf205; &#xf552; &#xf5c9; &#xf513;
        &#xf25c; &#xf637; &#xf238; &#xf224; &#xf225; &#xf1f8; &#xf2ed; &#xf2ed; &#xf1bb;
        &#xf181; &#xf262; &#xf091; &#xf0d1; &#xf4de; &#xf63b; &#xf4df; &#xf63c; &#xf553;
        &#xf1e4; &#xf173; &#xf174; &#xf26c; &#xf1e8; &#xf099; &#xf081; &#xf42b; &#xf402;
        &#xf403; &#xf0e9; &#xf5ca; &#xf0cd; &#xf0e2; &#xf2ea; &#xf404; &#xf29a; &#xf19c;
        &#xf127; &#xf09c; &#xf13e; &#xf405; &#xf093; &#xf287; &#xf007; &#xf007; &#xf406;
        &#xf4fa; &#xf4fb; &#xf4fc; &#xf2bd; &#xf2bd; &#xf4fd; &#xf4fe; &#xf4ff; &#xf500;
        &#xf501; &#xf502; &#xf0f0; &#xf503; &#xf504; &#xf234; &#xf21b; &#xf505; &#xf506;
        &#xf507; &#xf508; &#xf235; &#xf0c0; &#xf509; &#xf407; &#xf2e5; &#xf2e7; &#xf408;
        &#xf5cb; &#xf221; &#xf226; &#xf228; &#xf237; &#xf2a9; &#xf2aa; &#xf492; &#xf493;
        &#xf409; &#xf03d; &#xf4e2; &#xf40a; &#xf194; &#xf27d; &#xf1ca; &#xf189; &#xf40b;
        &#xf45f; &#xf027; &#xf026; &#xf028; &#xf41f; &#xf554; &#xf555; &#xf494; &#xf5cc;
        &#xf18a; &#xf496; &#xf5cd; &#xf1d7; &#xf232; &#xf40c; &#xf193; &#xf40d; &#xf1eb;
        &#xf266; &#xf410; &#xf410; &#xf2d0; &#xf2d0; &#xf2d1; &#xf2d1; &#xf2d2; &#xf2d2;
        &#xf17a; &#xf4e3; &#xf5ce; &#xf5cf; &#xf514; &#xf159; &#xf19a; &#xf411; &#xf297;
        &#xf2de; &#xf298; &#xf0ad; &#xf497; &#xf412; &#xf168; &#xf169; &#xf23b; &#xf19e;
        &#xf413; &#xf414; &#xf1e9; &#xf157; &#xf2b1; &#xf167; &#xf431; &#xf63f;
      </Text>
    </View>
  </ScrollView>
);
}

package.json 

{...}
"rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
 }

fontawesome.ttf位于。\ Projectname \ assets \ fonts \ fontawesome.ttf“

FontAwesomeAll

3 个答案:

答案 0 :(得分：3)

也许为时已晚，但我遇到了同样的问题。

运行后：

react-native link

这个问题为我解决了。

答案 1 :(得分：0)

使用库时，我遇到了同样的问题：

import FontAwesome from "react-native-vector-icons/FontAwesome";

... // <setting up bottom tab navigation>
let iconName = "store";
return <FontAwesome name={iconName} size={21} color={tintColor} />

库中似乎缺少许多图标。我建议您查看./node_modules/react-native-vector-icons/glythmaps/FontAwesome.json，看看它们是否存在，或者您使用的是哪个库。 FontAwesome.com上的名称不一定反映此库中的名称。

例如，tachometer图标，在网站上，免费图标为tachometer-alt，在此库中，免费图标为tachometer。

另一个选择是使用与react-native-vector-icons不同的图标包。我尝试使用FontAwesome5并遇到类似问题。

答案 2 :(得分：0)

我认为使用 https://github.com/FortAwesome/react-native-fontawesome 比完全避免使用任何库更好，因为它允许用户仅导入选定的图标，而且它基本上只是一堆打包到文件中的 svg。
如果您有许可证，也可以使用专业字体。

我遇到了类似的问题，我无法将 image-polaroid 与 expo-fonts 一起使用，并且发现他们最近发布了一个可与 RN（或 Expo）一起使用的官方库。

相关问题
最新问题