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

Z时代
2024-01-10
分类：综合

react

安装配置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 />
    }
}