android - 使用 react-native-vector-icons 图标未显示在 android 屏幕上

标签 android react-native react-native-vector-icons

我是 react-native 和 enter image description here 的新手试图实现选项卡导航器。我正在使用 react-native-vector-icons。我试图在我的屏幕上显示图标,但它没有显示任何图标。这就是我所做的

1-npm install react-native-vector-icons --save

2-react-native link react-native-vector-icons

3-Edited android/app/build.gradle


  project.ext.vectoricons = [
        iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] 
    ]
  apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

4- react-native run-android


import React, { Component } from 'react'; 
import { StyleSheet, Text, View,Image,StatusBar,Button,TouchableOpacity} from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import profile from './profile';

export  class test extends Component
{ render()
    { 
        return (
            <View style={styles.container}>
                 <Text style={styles.text}>Test</Text>
                 </View>
             );
    }
}
export default createBottomTabNavigator({
'test':{screen:test,
navigationOption:{
tabBarLabel:'test',
tabBarIcon:({tintColor})=>(
<Icon name="rocket" color={tintColor} size={40}/>
 )}},
 'Profile': { screen:profile,
    navigationOption:{
        tabBarLabel:'profile',
        tabBarIcon:({tintColor})=>(
            <Icon name="rocket" color={tintColor} size={40}/>
) } }     
},{

    navigationOption:{
        tabBarVisible:true
    },   
    tabBarOptions:{
        activeTintColor:'red',
        inactiveTintColor:'grey'
    }
});

const styles= StyleSheet.create({
    container:{
                 flexGrow:1,

                  backgroundColor:'#1c313a',
                justifyContent:'center',
                alignItems:'center'
              },
                text:{
                fontSize:25,
                fontWeight:'500',
                color :'#fff',
                paddingHorizontal:16 ,
                textAlign:'center'
               }
});

enter image description here

最佳答案

我想名字rocket图标类型Ionicons ,不存在。
你可以在这里查看

https://oblador.github.io/react-native-vector-icons/

也许您会使用其他类型或名称。

关于android - 使用 react-native-vector-icons 图标未显示在 android 屏幕上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54561888/

相关文章:

react-native - 触摸拖动而不是按下时如何取消TouchableOpacity响应器?

javascript - 异步存储检索项目中键的值

react-native - 将自定义图标导入 React Native 0.62

java - 如何从自定义适配器动态设置 ListView 的 imageView 源?

android - 无法转换为维度 : type=0x12

android - 清除整个适配器并添加新元素时的 RecyclerView 动画

reactjs - 如何在 React Native 中实现 Font Awesome 堆栈图标功能

android - 创建 Android 键盘字典

react-native - 如何在Expo中创建react-native apk?

android - React Native 矢量图标在 Android 上未正确显示