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

Question

react-native创建TabNavigator引用react-native-vector-icons组件图标一直无法显示
代码如下：

import {StackNavigator,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}}
                />
            )
        }
    }
});

目前效果：

尝试百度搜索，按照官网说明也也同样没效果，说明如图：

问题：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';
import {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}]}/>
            // ),
        }
    }
});

效果如图：