react-native创建TabNavigator引用react-native-vector-icons组件图标一直无法显示?

Question

代码如下：import {TabNavigator} from 'react-navigation' import HomePage from '../pages/HomePage' import Page1 from '../pages/Page1'import Page2 from '../pages/Page2' import Page3 from '../pages/Page3'import React from 'react'; import {Button} from 'react-native' import Ionicons from 'react-native-vector-icons/Ionicons' export const AppTabNavigator = TabNavigator({     Page1:{         screen:Page1,         navigationOptions: {             tabBarLabel: 'Page1',             tabBarIcon: ({ tintColor, focused }) => (               <Ionicons                 name={focused ? 'ios-home' : 'ios-home-outline'}                 size={26}                 style={{ color: tintColor }}               />             ),         }          },     Page2:{         screen:Page2,         navigationOptions:{             tabBarLabel:'Page2',             tabBarIcon:({tintColor,focused}) =>(                 <Ionicons                     name={focused?'ios-people':'ios-people-outline'}                     size={26}                     style={{color:tintColor}}                 />             )         }     },     Page3:{         screen:Page3,         navigationOptions:{             tabBarLabel:'Page3',             tabBarIcon:({tintColor,focused}) =>(                 <Ionicons                     name={focused?'ios-chatboxes':'ios-chatboxes-outline'}                     size={26}                     style={{color:tintColor}}                 />             )         }     } });在安卓模拟器目前效果：RN版本是0.55.4的，尝试百度搜索，按照官网说明也也同样没效果，地址：https://github.com/oblador/react-native-vector-icons问题：1.图标没显示出来；2.TabNavigator为啥不是显示到最低端而是跑到顶端了

Answer 1

已解决：

首先明确一点RN0.55.4引用react-native-vector-icons/Ionicons不需要做类似官网提示的那些复杂操作，通过一步步对比可以发现RN已经帮你做好。问题出在：TabNavigator 组件需要设置TabNavigator的位置tabBarPosition: 'bottom'，以及是否显示图标，默认关闭showIcon: true。还有就是icon图标名称需要使用正确

代码如下：

import {TabNavigator} from 'react-navigation'
import { createBottomTabNavigator } from 'react-navigation';
import Page1 from '../pages/Page1'
import Page2 from '../pages/Page2'
import Page3 from '../pages/Page3'
import React from 'react';i
mport {Button,Image} from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
export const AppTabNavigator = TabNavigator({
    Page1:{
        screen:Page1,
        navigationOptions: {
            tabBarLabel: 'Page1',
            tabBarIcon: ({ tintColor, focused }) => (
              <Ionicons
                name={focused ? 'ios-add' : 'ios-add-circle'}
                size={26}
                style={{ color: tintColor }}
              />
            ),            // //显示的图片
            // tabBarIcon: ({tintColor}) => (
            //     <Image
            //         source={require('../images/ic_home.png')}
            //         style={[{height: 24, width: 24}, {tintColor: tintColor}]}
            //     />
            // ),
        }     
    },
    Page2:{
        screen:Page2,
        navigationOptions:{
            tabBarLabel:'Page2',
            tabBarIcon:({tintColor,focused}) =>(
                <Ionicons
                    name={focused ? 'ios-add' : 'ios-add-circle'}
                    size={26}
                    style={{ color: tintColor }}
                />
            )            // tabBarIcon: ({tintColor}) => (
            //     <Image
            //         source={require('../images/ic_shop_car.png')}
            //         style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
            // ),
        }
    },
    Page3:{
        screen:Page3,
        navigationOptions:{
            tabBarLabel:'Page3',
            tabBarIcon:({tintColor,focused}) =>(
                <Ionicons
                    name={focused ? 'ios-add' : 'ios-add-circle'}
                    size={26}
                    style={{ color: tintColor }}
                />
            )            // tabBarIcon: ({tintColor}) => (
            //     <Image
            //         source={require('../images/ic_type.png')}
            //         style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
            // ),
        }
    }
},{    //设置TabNavigator的位置
    tabBarPosition: 'bottom',    //设置Tab标签的属性

    tabBarOptions: {        //Android属性
        upperCaseLabel: false,//是否使标签大写，默认为true
        //共有属性
        showIcon: true,//是否显示图标，默认关闭
        showLabel: true,//是否显示label，默认开启
        activeTintColor: '#EB3695',//label和icon的前景色 活跃状态下（选中）
        inactiveTintColor: 'gray',//label和icon的前景色 活跃状态下（未选中）
        style: { //TabNavigator 的背景颜色
            backgroundColor: 'white',
            height: 55,
        },
        indicatorStyle: {//标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题
            height: 0,
        },
        labelStyle: {//文字的样式
            fontSize: 13,
            marginTop: -5,
            marginBottom: 5,
        },
        iconStyle: {//图标的样式
            marginBottom: 5,
        }
    },
});

效果如下：

友情提示：
运行会报警告warning Method 'jumpToIndex' is deprecated. Please upgrade your code to use jumpTo instead 'Change your code from 'jumpToIndex(1)' to 'jumpTo('...')
原因：TabNavigator已经被遗弃了，使用createBottomTabNavigator或者createMaterialTopTabNavigator，对应的标签栏位置。
以下代码使用最新的createBottomTabNavigator组件，该组件不需要再对其进行位置和图标是否显示的属性设置，非常简单（推荐使用）

import { createBottomTabNavigator } from 'react-navigation';
// import HomePage from '../pages/HomePage'
import Page1 from '../pages/Page1'
import Page2 from '../pages/Page2'
import Page3 from '../pages/Page3'
import React from 'react';
import {Button,Image} from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
export const AppTabNavigator = createBottomTabNavigator({
    Page1:{
        screen:Page1,
        navigationOptions: {
            tabBarLabel: 'Page1',
            tabBarIcon: ({ tintColor, focused }) => (
              <Ionicons
                name={focused ? 'ios-add' : 'ios-add-circle'}
                size={26}
                style={{ color: tintColor }}
              />
            ),
            // //显示的图片
            // tabBarIcon: ({tintColor}) => (
            //     <Image
            //         source={require('../images/ic_home.png')}
            //         style={[{height: 24, width: 24}, {tintColor: tintColor}]}
            //     />
            // ),
        }     
    },
    Page2:{
        screen:Page2,
        navigationOptions:{
            tabBarLabel:'Page2',
            tabBarIcon:({tintColor,focused}) =>(
                <Ionicons
                    name={focused ? 'ios-add' : 'ios-add-circle'}
                    size={26}
                    style={{ color: tintColor }}
                />
            )
            // tabBarIcon: ({tintColor}) => (
            //     <Image
            //         source={require('../images/ic_shop_car.png')}
            //         style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
            // ),
        }
    },
    Page3:{
        screen:Page3,
        navigationOptions:{
            tabBarLabel:'Page3',
            tabBarIcon:({tintColor,focused}) =>(
                <Ionicons
                    name={focused ? 'ios-add' : 'ios-add-circle'}
                    size={26}
                    style={{ color: tintColor }}
                />
            )
            // tabBarIcon: ({tintColor}) => (
            //     <Image
            //         source={require('../images/ic_type.png')}
            //         style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
            // ),
        }
    }
});

效果如图：