react-native-vector-icons在TabNavigator使用示例

安装配置react-navigation 

https://reactnavigation.org/docs/en/getting-started.html 

安装react-navigation 报错 EPERM: operation not permitted ?

 

cmd进入根目录

cd android

gradlew clean

回到根目录 cd../

重新操作下载或运行

 

安装配置react-native-vector-icons

https://www.npmjs.com/package/react-native-vector-icons

图标库

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

 

Icon 图标在安卓模拟器显示划线框？

https://www.npmjs.com/package/react-native-vector-icons#troubleshooting

示例代码：

import React, { Component } from 'react'
import {Text,View,Platform} from 'react-native'

import Icon from 'react-native-vector-icons/FontAwesome';
import {createAppContainer, createBottomTabNavigator } from 'react-navigation';

import ArticleScreen from './tabs/article/article'
// import ArticleContentScreen from './tabs/article/content'
import ImageScreen from './tabs/image/image'
import MusicScreen from './tabs/music/music'
import MapScreen from './tabs/map/map'

const AppContainer = createAppContainer(createBottomTabNavigator({
    Home:{
        screen:ArticleScreen,
        navigationOptions: {
            tabBarLabel: '知道',
            tabBarIcon: ({ tintColor, focused }) => (
              <Icon
                name='home'
                size={23}
                style={{ color: tintColor }}
              />
            ),
            tabBarOptions: {
                activeTintColor: 'tomato',
                inactiveTintColor: 'gray'
            }  
        }
           
    },
    Image:{
        screen:ImageScreen,
        navigationOptions:{
            tabBarLabel:'靓图',
            tabBarIcon:({tintColor,focused}) =>(
                <Icon
                    name='circle-o'
                    size={23}
                    style={{ color: tintColor }}
                />
            ),
            tabBarOptions: {
                activeTintColor: 'tomato',
                inactiveTintColor: 'gray'
            }
        }
        
    },
    Music:{
        screen:MusicScreen,
        navigationOptions:{
            tabBarLabel:'音乐',
            tabBarIcon:({tintColor,focused}) =>(
                <Icon
                    name= 'music'
                    size={23}
                    style={{ color: tintColor }}
                />
            ),
            tabBarOptions: {
                activeTintColor: 'tomato',
                inactiveTintColor: 'gray'
            }
        }
        
    },
    Map:{
        screen:MapScreen,
        navigationOptions:{
            tabBarLabel:'地图',
            tabBarIcon:({tintColor,focused}) =>(
                <Icon
                    name= 'map-marker'
                    size={23}
                    style={{ color: tintColor }}
                />
            ),
            tabBarOptions: {
                activeTintColor: 'tomato',
                inactiveTintColor: 'gray'
            }
        }
        
    }
}));
export default class Router extends Component {
    render() {
        return <AppContainer />
    }

}

效果图