时间戳

首页 > 解决方案 > 如何让反应原生图标在反应原生 Cli 创建的项目中工作？

react-native - 如何让反应原生图标在反应原生 Cli 创建的项目中工作？

问题描述

我在 React Native Cli 项目中使用 React Native 矢量图标。我面临以下问题。这是我的错误

这是我的错误的快照

我使用的是 React Native 0.60，所以我不需要链接库。我还在我的 iOS 项目中安装了 pod。我还在info.plist我的 iOS 项目的文件中添加了以下内容

<key>UIAppFonts</key>
<array>
<string>AntDesign.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>Octicons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Zocial.ttf</string>
</array>

对于app/bulid.gradle我添加的Android

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import {Feather} from 'react-native-vector-icons';
const SearchBar = () => {
return ( <View style={styles.background}>
<Feather name="search" />
<Text>Search Bar</Text> </View> ); };

我仍然面临同样的问题

如果我评论该行<Feather name="search" />，那么我的应用程序可以正常工作

标签： react-native

解决方案

把它放在text.

import Icon from 'react-native-vector-icons/Ionicons';
...
const SearchBar = () => {
return ( <View style={styles.background}>

<Text> <Icon name="search" /> Search Bar</Text> </View> ); };

这是我创建的示例。

import React from 'react';
import { Ionicons } from '@expo/vector-icons';
import {View,Text} from "react-native"


const SearchBar = () => {
return ( <View style={{backgroundColor:"red",width:"50%"}}>

<Text> <Ionicons name="md-checkmark-circle" /> Search Bar</Text> </View> ); };


export default class IconExample extends React.Component {



  render() {
    return (
      <View style={{flex:1,alignItems:"center",justifyContent:"center"}}>
      {SearchBar()}
      <Ionicons name="md-checkmark-circle" size={32} color="green" />
      </View>
      );
  }
}

推荐阅读