标签: react-native-vector-icons

我正在为抽屉项目和 headerLeft 设置图标。但是图标没有出现在我的 Android 应用程序中。我正在使用react-native-elements库在我的代码中使用图标。图标类型字体很棒。我已经具体提到了图标的类型。

我已经尝试了所有命令，例如react-native link，并成功链接了所有库，但没有任何效果。

主要组件.js

import React, { Component } from 'react';
import Menu from './MenuComponent';
import { View,Platform } from 'react-native';
import Dishdetail  from './DishdetailComponent';
import Home from './HomeComponent';
import { createStackNavigator,createAppContainer} from 'react-navigation'; 
import {createDrawerNavigator} from 'react-navigation'; 
import { Icon } from 'react-native-elements'
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import Contact from './ContactusComponent';
import About from './AboutusComponent';


 const MenuNavigator = createStackNavigator({
 Menu: { 
 screen: Menu,
 navigationOptions: ({ navigation }) …

使用 React Native 实现堆叠/重叠图标。

我试图在本机反应中实现这样的目标：https : //fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

如何实现这一目标？

我用于react-native-vector-icons我的 React 本机项目。最近，当我打开我的应用程序时，它不断显示我在字段中填写的错误图标name，或者显示该图标不存在（“问号”）。

我感觉很尴尬，因为大约一两周后就正常了。我一直在 SOF 或他们的 github 上搜索，但感觉没有希望。

你能帮我解决这个问题吗？

<Icon
    containerStyle={{
        display: (this.state.email.length > 0) ? 'flex' : 'none',
        marginRight: normalize(10),
    }}
    name="mail-outline"
    type="ionicon"
    color="#7384B4"
    size={22}
    onPress={() => {
        this.setState({ email: '' });
    }}
/>

这是我的代码，它应该显示邮件图标，但我有这个

这是我在我的项目中使用过的一些相关依赖版本package.json

"react": "16.9.0",
"react-native": "0.61.3",
"react-native-elements": "^1.2.0",
"react-native-vector-icons": "^7.0.0",

谢谢，祝你有美好的一天。

自从升级到 Expo 34 后，出现与 Expo/矢量图标相关的以下错误。

fontFamily“FontAwesome”不是系统字体，尚未通过 Font.loadAsync 加载。

• 如果您打算使用系统字体，请确保您输入的名称正确并且您的设备操作系统支持该名称。

• 如果这是自定义字体，请务必使用 Font.loadAsync 加载它。

我尝试过在 App.js 中手动加载字体

Font.loadAsync({FontAwesome: require("../node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/FontAwesome.ttf")})

但没有效果。我已将 expo-font 更新到最新版本，清除了 node_modules 和 package-lock，并重建了项目。

有什么线索吗？

我使用的是 React Native 版本 0.67.3

我安装矢量图标并添加 andriod/app/build.gradle 应用：“../../node_modules/react-native-vector-icons/fonts.gradle”

但图标不显示

在我的React Native应用中，我想使用Vector Icons作为导航栏按钮。为此，我正在使用：https : //github.com/oblador/react-native-vector-icons 导航：https : //reactnavigation.org/

我也设法设置了图标，但是当我点击按钮时，背景变成黑色，我得到了不想要的效果。有没有办法在按下按钮时也能保持背景色透明？

这是我的代码：

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state

    return {
    headerTitle: "Blog posts",
    headerRight: (            
        <Icon.Button name="quote-right" backgroundColor="transparent" color="black" onPress={() => params.postComment()}>
            <Text style={{fontSize: 15}}></Text>
        </Icon.Button>            
      ),
    headerLeft: (                                     
        <Icon.Button name="navicon" backgroundColor="transparent" color="black" onPress={() => params.postComment()}>
            <Text style={{fontSize: 15}}></Text>
        </Icon.Button>                                                                     
      ),
    };
};

这就是我得到的：

我想更改搜索图标搜索栏反应原生纸与条形码扫描图标。
Native-paper 使用react-native-vector-icons作为MaterialCommunityIcons 中可用的图标和条形码扫描
这是我尝试过的代码，它给出了一个空白而不是一个图标

import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
<Searchbar
  placeholder="Search"
  onChangeText={query => { this.setState({ firstQuery: query }); }}
  value={firstQuery}
  icon={<MaterialCommunityIcon name="barcode-scan" size={30}/>}
/>

这是正确的方法还是我错过了什么？

我按照本教程添加到react-native-web项目中react-native。但我在添加react-native-vector-icons到项目时遇到错误。

./node_modules/react-native-vector-icons/lib/create-icon-set.js
SyntaxError: /home/hamidreza/Desktop/myApp/node_modules/react-native-vector-icons/lib/create-icon-set.js: Support for the experimental syntax 'classProperties' isn't currently enabled (43:22):

  41 | 
  42 |   class Icon extends PureComponent {
> 43 |     static propTypes = {
     |                      ^
  44 |       allowFontScaling: PropTypes.bool,
  45 |       name: IconNamePropType,
  46 |       size: PropTypes.number,

我也将我的更改babel.config.js为：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      '@babel/plugin-proposal-class-properties',
      {
        loose: true,
      },
    ],
  ],
};

或者

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    '@babel/plugin-proposal-class-properties' …

我通过他们的手册添加了材料设计论文库。

Gradle 打印了很多警告，如下所示：

> Task :app:stripDebugDebugSymbols
Execution optimizations have been disabled for task ':app:stripDebugDebugSymbols' to ensure correctness due to the following reasons:
  - Gradle detected a problem with the following location: '/app/android/app/build/intermediates/merged_native_libs/debug/out'. Reason: Task ':app:stripDebugDebugSymbols' uses this output of task ':app:copyDebugReactNativeVectorIconFonts' without declaring an explicit or implicit dependency. This can lead to incorrect results being produced, depending on what order the tasks are executed. Please refer to https://docs.gradle.org/7.2/userguide/validation_problems.html#implicit_dependency for more details about this problem.

如果通过 Android Studio 运行我的应用程序，它会启动，但图标看起来很奇怪（不像 …

该图标显示在屏幕/页面中，但不会显示在底部导航中。我尝试过的解决方案：

• 按照github的安装指南进行操作，我尝试了GRADLE和MANUAL选项，但结果相同
• ./gradlew clean然后尝试过npx react-native run-android，但结果相同
• npx react-native link react-native-vector-icons 然后尝试过npx react-native run-android，但结果相同

屏幕截图底部导航栏

屏幕截图设置屏幕

它确实出现在屏幕/页面中，如上面的屏幕截图所示，但不会显示在底部导航中。

注意：我已经在模拟器和真实的 Android 设备中进行了测试，但仍然得到相同的结果！

底部选项卡的代码

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import ProductNavigation from './ProductNavigation'
import SettingScreen from '../screen/SettingScreen'



const BottomTab = createBottomTabNavigator();

const BottomTabNav = () => {
return (
    <BottomTab.Navigator>
        <BottomTab.Screen 
        name="Home" 
        component={ProductNavigation} 
        options={{
            tabBarLabel: "Home", …